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 example

简而言之，扩展可拖动选项数组以包括start，记录数据对象中的顶部/左侧位置，然后在stop上，检查DOM中的其他可拖动项，如果有匹配的项，则调用revert函数。

例如：

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

我很确定这就是你想要做的。顺便说一句，从这里你可以动画的还原函数，以便它优雅地返回到它的最后一个地方。