jQuery перетаскивание дублирует div

Question

ОК, поэтому я взял этот фрагмент кода из других вопросов и не могу на всю жизнь вспомнить, какой, иначе я бы просто попытался воскресить этот вопрос.Вот что я пытаюсь выполнить:

У меня есть различные div и я хочу, чтобы я мог перетаскивать их и поменять их местами, поэтому, если я возьму красный квадрат и упаду на синий квадрат, они будутпоменяться местами (защелкнуться на своих местах).Я просто пытаюсь заставить действительно базовый код работать сейчас, и как только я его получу, я буду реализовывать разные таблицы стилей, когда они меняются местами, чтобы изменить содержимое и внешний вид.

Проблема, с которой я сталкиваюсь с текущим кодом, заключается в том, что когда я перетаскиваю его, он возвращается в исходное положение и создает дублирующий элемент div после моих других элементов div.Надеюсь, что это имеет смысл, вот jquery:

$(document).ready(function () {
    src = null;
    options = {
        revert:true,
        /*axis: 'x',*/
        opacity: 0.8,
        start: function() {
            src = $(this).parent();
        }
    }

    $(".item").draggable(options);
    $(".container").droppable({
        drop: function(event, ui) {
            src.append(
                $('.item', this).remove().clone()
                    .removeClass().addClass("item")
                    .css({"left": '', "opacity": '',"top":''})
                    .draggable(options)
                );

            $(this).append(
                ui.draggable.remove().clone()
                    .removeClass().addClass("item")
                    .css({"left": '', "opacity": '',"top":''})
                    .draggable(options)
                );
        }
    });

});

return this.pushStack( stack );

Разметка такая:

<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

Стилизация должна иметь значение здесь, но если это так, я просто установите их на 100x100px,один красный, один синий и один зеленый.

Answer 1

Вот решение этой проблемы, без использования плагинов подкачки, просто jQuery UI. Скрипка: http://jsfiddle.net/promatik/YtQRd/

jQuery UI:

$(".item").on("mouseup", function(){
   $(this).css("top", "").css("left", "");
});

$(".item").draggable().droppable({
    drop: function( event, ui ) {
        draged = ui.draggable.css("top", "initial").css("left", "initial");
        dropped = $(this);
        var elems = draged.parent().children();
        if( elems.index(draged) > elems.index(dropped) ) {
            temp = draged;
            draged = dropped;
            dropped = temp;
        }
        var nElem = draged.next();
        dropped.after(draged);
        nElem.before(dropped);
    }
});

Это сделает обмен объектами, перетаскиваемыми и опущенными.