如何交换元素与jQuery UI可拖放和可拖放？ [英] How to swap element with jQuery UI draggable and droppable?

问题描述

我有两个div.containers。两个容器都有div.item。使用jQuery，我如何可以通过拖放来交换div.item元素下降？这两个元素都应该能够重新交换。

有没有什么简单的方法呢？

谢谢...

解决方案

好的，我得到了肮脏的解决方案...

$（$）$（$）$（$）$（$）$（$）$（$）$轴：'x'，
opacity：0.8，
开始：function（）{
src = $（this）.parent（）;
}
};

$（。item）。draggable（options）;
$（。container）。droppable（{
drop：function（event，ui） b $ b src.append（
$（'。item'，this）.remove（）。clone（）
.removeClass（）。addClass（item）
.css {left：，opacity：''}）
.draggable（options）
）;

$（this）.append（
ui.draggable.remove（）。clone（）
.removeC lass（）。addClass（item）
.css（{left：'，opacity：''}）
.draggable（options）
）;
}
}）;
}）;

希望有人可以改善这个...：）

欢呼...

I have two div.containers. Both containers have div.item. With jQuery, how can I swap div.item elements by drag & drop? Both element should able to re-swap again.

Is there any simple way to do this?

Thanks...

解决方案

OK, I got the dirty solution...

$(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": ''})
                .draggable(options)
            );

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

Hope, someone could improve this... :)

Cheer...

这篇关于如何交换元素与jQuery UI可拖放和可拖放？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！