jQuery/UI - .html 拖动更新？

Question

所以我目前绝对定位180"hot spots"

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

我可以通过检查元素来拖动并获取位置。但我想我也许可以消除中间人，只需要 .html 将我需要的东西放入元素中。

这里有一个fiddle: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);

});

我希望在拖动时更新数字 "live"。这可能吗？我尝试了几种方法，这是我得到的结果。

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

以 1 毫秒的延迟执行 setInterval 并不是一个很好的做法，因为您有太多的迭代只是开销。

如文档中所述（请参阅 here）jQueryDraggable 提供了多个您可以使用的事件。

我写了一个片段让你习惯使用事件（因为你显然不知道它们的用法）：

$(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"));
  });
});

我还为你创建了一个工作 fiddle here

希望对您有所帮助 ;)

jQuery/UI - .html 拖动更新？

jQuery/UI - .html update on drag?

jquery

jquery-ui