jQuery UI 拖放列表 - 两种方式？

Question

我一直在浏览 jQueryUI 的 Draggable 和 Droppable 的文档。 我找到了多种方法可以将列表拖放到另一个列表，但不是两种方法都可以？

我的情况是，我有 2 个列表：

<div id='attached'>
  <ul>
    <li id='12'>An item</li>
    <li id='48'>An item</li>
    <li id='183'>An item</li>
  </ul>
</div>

<div id='non-attached'>
  <ul>
    <li id='36'>An item</li>
    <li id='873'>An item</li>
    <li id='1639'>An item</li>
  </ul>
</div>

如果将一个项目从列表 1 放到列表 2 中，则应该执行 AJAX url - 就像

hello.asp?action=add&id=48

如果一个人从列表 2 中删除一个项目到列表 1 另一个 AJAX url 应该被执行 - 比如

hello.asp?action=remove&id=48

这有可能吗？ :) 这将使我的脚本界面更容易:)

注意：我已经熟悉 jQueryUI，但 droppable 和 draggable 对我来说都是新的。至少到现在为止:)

已编辑：

<ul id='attached'>
  <li id='itemID_12'>An item</li>
  <li id='itemID_48'>An item</li>
  <li id='itemID_183'>An item</li>
</ul>

<ul id='non-attached'>
  <li id='itemID_36'>An item</li>
  <li id='itemID_873'>An item</li>
  <li id='itemID_1639'>An item</li>
</ul>

$(function() {
  $('#attached').sortable({ dropOnEmpty: true, items: 'li:not(.ui-state-disabled)', cursor: 'pointer', update: function(event, ui) { }, connectWith: '#non-attached' }).disableSelection();
  $('#non-attached').sortable({ dropOnEmpty: true, items: 'li:not(.ui-state-disabled)', cursor: 'pointer', update: function(event, ui) { }, connectWith: '#attached' }).disableSelection();
};

现在我只需要通过 AJAX 通过更新获取正确的序列化数据：{} ?

已编辑：

知道了！

var order = $('#attached').sortable('serialize',{key:'string'});
$.ajax({
  type: 'POST', 
  cache: false, 
  contentType: 'application/x-www-form-urlencoded; charset=UTF-8', 
  url: 'functions.asp?a=helloworld', 
  data: order 
});

现在，当我在 functions.asp 中请求.form("string") 时，我得到一系列 id，例如 "25, 28, 31, 94, 95".. :)

Answer 1

虽然使用可排序（顺序在我的应用程序中很重要），但我已经做了类似的事情，可排序是基于可拖动的。目前我们的网络在访问 jqueryui.com 时遇到了问题，所以我不能准确地给你你想要的东西，但我会根据我的情况给你一些东西，这应该会给你一个好的开始。

$(function() {
    $("#attached").sortable({
        update: function(event, ui) {
            FunctionToCheckAddtionAndCallAjax();
        },
        connectWith: '#non-attached'
    });

    $("#non-attached").sortable({
        update: function(event, ui) {
            FunctionToCheckRemovalAndCallAjax();
        },
        connectWith: '#attached'
    });
});

由于这是基于可排序而不是拖放，我将检查和 ajax 推送到函数调用而不是匿名函数，这些函数应该检查更新是添加/删除还是只是重新排序并有条件地进行 ajax 调用。当添加/删除项目但无法访问该站点时，可能会有事件处理程序，我无法检查文档。