Question

我是JQuery UI的新手，并不熟悉如何使用选项，方法和事件。我正在使用Jquery UI可排序portlet（示例找到here），我正在做的非常类似于示例，我有3列，但每列只有1个portlet。

（here is a fiddle）这是它的基本html：

<div class="column">
    <div class="portlet">
        <div class="portlet-header">Feeds</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer     adipiscing elit</div>
    </div>
</div>
<div class="column">
    <div class="portlet">
        <div class="portlet-header">Shopping</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
</div>
<div class="column">
    <div class="portlet">
        <div class="portlet-header">Links</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
</div>

我想要发生的是portlet在放置在不同的列时切换或交换位置（因此当前拖动的portlet所在的列中的portlet将进入拖动的portlet来自的位置。）< / p>

我的研究引导我找到一个没有答案的similar question，但我在任何地方都找不到这个问题的答案。

我知道有关于Jquery UI可排序选项，方法和事件的文档（找到here）。我认为这是我的问题可以解决的问题我的困境是我对这些事情不熟悉并且不确定从哪里开始或从那里开始。我对可能应该使用哪些事件有所了解，但我不确定如何使用它们。

我认为over event会很有用，因为我的理解是它会告诉我们一个portlet已被拖动到一个新列。与over事件一起发送的ui对象有一个属性sender，告诉我们portlet来自哪个可排序的; sortable应该是另一个portlet的目标，该portlet已经在当前拖动的portlet刚进入的列中。我也认为ui.item属性也很有用，所以如果你可以在列中获取jquery对象，你可以知道哪一个最近被添加，哪一个已经存在。

据我所知，这是个。

您的回答将不胜感激。：）

Answer 1

嘿，我在姐姐的帮助下找到了它！

 var beforeDiv;
 $(".column").sortable({
    connectWith: ".column",
    start: function (event, ui) {
        beforeDiv = ui.item.closest('div.column');
    },
    beforeStop: function (event, ui) {
        var afterDiv = ui.item.closest('div.column');

        beforeDiv.prepend(afterDiv.find(".portlet").not(".ui-sortable-placeholder").not(ui.item));
    }
});

这里是小提琴：http://jsfiddle.net/FXrzN/45/

Jquery UI可排序portlet：切换两个portlet的位置

1 个答案: