jQuery Droppable和Draggable

Question

我有一个小应用程序，你可以在一个容器中拖动一个盒子，并且还用另一个切换位置，这是目前有缺陷的。他们切换像jQuery可排序的地方，但我遇到了Droppable的问题。对于over事件，它只会在按住鼠标时激活一次。

http://jsfiddle.net/44SAh/

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

Answer 1

这是一个适合您的解决方案。基本上，当您开始拖动某些内容时，您会缓存该位置。然后，当您处于可放置位置时，将droppable的位置与起始位置交换，更新可拖动的起始位置，并更新基础可放置数据结构以将其标记为out，并更正偏移量。这是一个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();
        }
    });
});