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();
};

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

编辑：

GOT IT！

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

虽然使用了sortables（我的应用程序中的顺序很重要），但我做了类似的事情，sortables基于draggables。目前我们的网络在访问jqueryui.com方面遇到了问题，所以我无法准确地告诉你你想要的东西，但我会根据我的情况给你一些应该给你一个良好开端的东西。

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

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

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

jQueryUI Drag＆amp; Drop列表 - 两种方式？

1 个答案: