JQuery Droppable и Draggable

Question

У меня есть небольшое приложение, в котором вы можете перетащить ящик в контейнер, а также поменять местами другой, который в данный момент содержит ошибки. Они меняются местами, как сортировка jQuery, но у меня проблема с Droppable. с событием over оно активируется только один раз, удерживая мышь.

http://jsfiddle.net/44SAh/

Это то, что я имею до сих пор, попробуйте перетащить поле поверх другого, а затем снова вернуться вверх, не отпуская левую кнопку мыши. Начинает глючить. Это потому, что событие over активируется только один раз за клик. Есть ли обходной путь для этого, я хочу иметь возможность перетаскивать прямоугольники вверх и вниз и иметь ту же последовательность, где они меняются местами, например сортируемые. И нет, я не могу использовать сортируемую, потому что ящики должны иметь возможность перекрываться до некоторой степени, плюс свободно перемещаться.

Answer 1

Вот рабочее решение для вас. По сути, вы кэшируете позицию, когда начинаете что-то перетаскивать. Затем, когда вы находитесь над местом сбрасывания, вы меняете положение места сброса на начальное положение, обновляете начальное положение перетаскиваемого объекта и обновляете базовую структуру сбрасываемых данных, чтобы пометить его как 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();
        }
    });
});