jquery - 获取从拖动元素到其他相关元素的距离

Question

我可能有一个关于 jQuery 的非常具体的问题的 draggable()结合CSS。我有很多 divs在我的 body 里都是可拖动的:

for(var i = 0; i < 150; i++) {
        var randomleft = Math.floor(Math.random()*1000);
        var randomtop = Math.floor(Math.random()*1000);
        var appenditem = '<div id="cube'+i+'" style="position: absolute; border: 2px #000 solid; left: '+randomleft+'px; top: '+randomtop+'px; width: 15px; height: 15px;"></div>'
        $('body').append(appenditem);
        cubes.push($('#cube'+i));
    }

$('div').draggable();

到目前为止一切顺利。

然后我有一个固定的<div id="fixed">在我 body 的特定位置，可以说:top: 50px; left: 50px;

我想做的是在 dragstop 上触发事件处理程序并获取 dragstop 上当前拖动的 div 与固定 div 之间的距离。

例如，在 dragend 上，一个 div 被拖到:top: 500px; left: 40px那么我想要这些值:+450和 -10因为 div 是 top: +450px和 -10px来自 #fixed .

我该怎么做，尤其是负值。

提前致谢

Answer 1

LIVE DEMO

jQuery(function($) {

   var allCubes  = '',
       $fixed    = $('#fixed'),
       fixedOffs = $fixed.offset();

    for(var i = 0; i < 150; i++) {
        var randomleft = Math.floor(Math.random()*1000),
            randomtop  = Math.floor(Math.random()*1000);
        allCubes += '<div id="cube'+i+'" style="position: absolute; border: 2px #000 solid; left: '+randomleft+'px; top: '+randomtop+'px; width: 15px; height: 15px;"></div>';
    }  

    $('body').append(allCubes); // Outside loop! (60% more performance)

    $('[id^="cube"]').draggable({
        stop: function(ev, ui){
            var pos = ui.position; // or use ui.offset if you need document related position
            // var orgPos = ui.originalPosition; // if you need it
            alert(
               ( pos.left - fixedOffs.left )+' \n '+
               ( pos.top  - fixedOffs.top  )
            );
        }
    });  

});