javascript - Jquery 可拖动元素相交

Question

如果拖动元素与任何可拖动元素相交，我想让拖动的项目恢复旧位置。有什么想法吗？

                $( "#MainContents div[name=draggable]" ).each(function() {
$( this ).draggable({containment: 'parent',
  scrollSpeed: 1000,
  cursor: "crosshair",
   scroll:true,
 disabled: DragDropState,
stop: function(event, ui) {
        var Stoppos = $(this).position();
        var parentPosition=$(this).parent().position();
        var CalculatedTop=Stoppos.top-parentPosition.top;
        var CalculatedLeft=Stoppos.left-parentPosition.left;
        }
    });
});

Answer 1

您需要在拖动开始时记录它的来源，然后在拖动停止时检查覆盖。看看这个jsfiddle 例子

简而言之，扩展您的可拖动选项数组以包括开始，记录数据对象中的顶部/左侧位置，然后在停止时检查 DOM 中的其他可拖动项目，如果有任何匹配项，则调用还原函数。

前任：

$( this ).draggable({
start: function() {
  var div = $(this);
        div.data('top', div.css('top'));
        div.data('left', div.css('left'));
},
containment: 'parent',
  scrollSpeed: 1000,
  cursor: "crosshair",
   scroll:true,
 disabled: DragDropState,
stop: function(event, ui) {
        var draggables = $('.ui-draggable');
        var div = $(this);
        var goHome = function () {
            div.css('left', div.data('left'));
            div.css('top', div.data('top'));
        };

        draggables.not(div).each(function () {
            var curr = $(this);
            var currPos = curr.position();
            var divPos = div.position();
            if (divPos.left >= currPos.left && divPos.left <= (currPos.left + curr.width())) {
                if (divPos.top >= currPos.top && divPos.top <= (currPos.top + curr.height())) {
                    goHome();
                }
            }
        });
    };
});

我很确定这样的事情就是你想要做的。顺便说一句，从这里您可以为还原功能设置动画，以便它优雅地回到上次的位置。