jQueryUI拖放列表-两种方式？

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网址-如

hello.asp?action=add&id=48

如果将列表2中的项目拖放到列表1中，则应执行另一个AJAX网址-例如

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中使用request.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电话。 可能会有事件处理程序，用于添加/删除项目的时间，但是由于无法访问该站点，我无法查看文档。