jQuery 可拖放和可拖动

Question

我有一个小应用程序，您可以在容器中拖动一个盒子，也可以与另一个盒子交换位置，目前这是有问题的。他们交换了像 jQuery sortable 这样的位置，但我在 Droppable 上遇到了问题。对于 over 事件，它仅在按住鼠标时激活一次。

http://jsfiddle.net/44SAh/

这就是我到目前为止所做的，尝试将一个框向下拖动到另一个框上，然后再次返回，不要松开鼠标左键。它开始出现故障。那是因为 over 事件每次点击仅激活一次。有没有解决方法，我希望能够上下拖动一个框，并在它们切换位置时具有相同的一致性，例如可排序。不，我不能使用可排序，因为框必须能够在一定程度上重叠，并且可以自由移动。

Answer 1

这是适合您的可行解决方案。基本上，当您开始拖动某些东西时，您会缓存位置。然后，当您位于可放置的上方时，将可放置的位置与开始位置交换，更新可拖动的开始位置，并更新底层可放置的数据结构以将其标记为退出，并更正偏移量。这是一个jsfiddle:http://jsfiddle.net/fordlover49/BwvK4/

$(function() {
    $(".ui-widget-content").draggable({
        grid: [5, 5],
        start: function(event, ui) {
            // cache the position we were at when we started dragging.
            $(this).data("startPos", ui.position);
        },
        stack: ".ui-widget-content"
    });

    $(".ui-widget-content").droppable({
        tolerance: 'intersect',
        over: function(event, ui) {            
            var offset = $(ui.draggable).data("startPos");
            // update draggable's cached position to what the droppable was
            $(ui.draggable).data("startPos", {
                top: $(this).position().top,
                left: offset.left});

            // swap droppable positions with dragging's original pos.
            $(this).css("top", offset.top);

            // clear the over events, and update the droppable's offset.
            $(this).data("droppable").isout = 1;
            $(this).data("droppable").isover = 0;            
            $(this).data("droppable").offset = $(this).offset();
        }
    });
});