1

我对 JQuery UI 很陌生，对如何使用选项、方法和事件不太熟悉。我正在使用 Jquery UI 可排序 portlet（此处找到示例），我所做的与示例非常相似，我有 3 列，但每列只有 1 个 portlet。

（这是一个小提琴），这是它的基本 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 的来源。）

我的研究将我引向了一个没有答案的类似问题，但我在任何地方都没有找到这个问题的答案。

我知道有关于 Jquery UI 可排序选项、方法和事件的文档（在此处找到）。我认为这是我的问题可以解决的地方我的困境是我对这些东西很陌生，不知道从哪里开始或从哪里开始。我对可能应该使用哪些事件有所了解，但不确定如何使用它们。

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

据我了解，这差不多。

您的回答将不胜感激。:)

4

1 回答 1

2

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

 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/

于 2013-08-16T23:07:16.803 回答