Question

我可能会对jQuery的{{1}}与css结合提出一个非常具体的问题。我的身体里有很多draggable()，都是可拖的：

divs

到目前为止一切顺利。

然后我的身体在特定位置有一个固定的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">

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

例如，在dragend上，div会被拖到：dragstop，然后我希望获得值top: 500px; left: 40px和+450，因为div是-10和{{ 1}}来自top: +450px。

我该怎么做，特别是负值。

提前致谢

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  )
            );
        }
    });  

});

Answer 2

当您使用jQuery时，您所需要的只是固定元素的offset()。停止回调中的可拖动ui对象也提供了这些信息，其余的是简单的数学：

// assuming the stop callback of draggable()
stop: function( event, ui ) {
    var fixedOffset = $("#fixed").offset();

    return {
        top: ui.offset.top - fixedOffset.top,
        left: ui.offset.left - fixedOffset.left,
    }
}

使用示例的值，此函数将返回具有以下值的对象文字：{ top: 450, left: -10 }

从拖动元素到其他相关元素的距离

2 个答案: