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

简而言之，扩展你的draggable选项数组以包括start，记录数据对象中的top / left位置，然后停止，检查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();
                }
            }
        });
    };
});

我很确定这样的事情是你想要做的。顺便说一下，你可以在这里设置恢复功能的动画，让它优雅地回到最后的位置。

Jquery可拖动元素相交

1 个答案: