jQuery/UI -拖动时的.html更新？

Question

所以我现在绝对定位了180个“热点”

一点都不好玩。我想我可以节省一点时间，在拖动时显示顶部和左边的数字，这样我就更容易输入了。

我可以通过检查元素来拖动和得到位置。但我想我可以消除中间的人，只是.html，我需要的元素。

，这是一把小提琴： http://jsfiddle.net/q0huu15t/1/

$(function() {
    $( ".drag" ).draggable();
});

$(function() {
    var $this = $( ".drag" );
    var top = $this.css("top");
    var left = $this.css("left");

    $this.html('Top: ' + top +'<br /><br />Left: ' + left);

});

我想让这些数字在我拖动的时候更新“实时”。这个是可能的吗？我试过几种方法，这就是我得到的结果。

var top = $this.attr("style", "top");

有什么想法吗？

谢谢:)

编辑：

所以我自己想出来了。

也许这不是最好的方法，但它是有效的，而且它不会停留，所以谁在乎呢。

setInterval(function(){
    $(function() {
        var $this = $( ".drag" );
        var top = $this.css("top");
        var left = $this.css("left");

        $this.html('Top: ' + top +'<br /><br />Left: ' + left);

    });
}, 1);

基本上是一遍又一遍地运行这个函数。它只对第一个工作，而这个var $this = $( ".drag" ).each();不工作！不过，这对我来说已经足够了。所以希望它能帮助其他人:)

Answer 1

使用1ms延迟执行这个setInterval并不是一个很好的实践，因为您有太多的迭代，这只是开销。

如文档(请参阅这里)中所述，jQuery可拖放提供了几个您可以使用的事件。

我为您编写了一段代码片段，以便您习惯于处理事件(显然您不知道它们的用法)：

$(function() {    
  $(".drag").draggable();    

  $(".drag").on('dragstop, dragstart, drag', function(){
    // update "live"
    $this=$(this);
    $this.html('Top: ' + $this.css("top") +'<br /><br />Left: ' + $this.css("left"));
  }).each(function(){
    // initial write cause the "dragcreate" event obvsly doesnt work
    $this=$(this);
    $this.html('Top: ' + $this.css("top") +'<br /><br />Left: ' + $this.css("left"));
  });
});

我还为u 这里创建了一个工作小提琴。

我希望这对你有帮助;)