拖放列表-两种方式

jQueryUI Drag&Drop lists - Both ways?

本文关键字：方式 两种 列表 拖放      更新时间：2023-09-26

我一直在查看jQueryUI的可拖放文件。我发现了各种方法，使一个列表拖放到另一个列表，但不是两种方式?

我的情况是，我有两个列表:

<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，但可拖放和可拖放对我来说都是新的。至少到现在为止:)

编辑:

<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通过update: {} ?

获得正确的序列化数据。

编辑:

得到它!

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

现在当我在function .asp中的request.form("string")时，我得到了一系列的id，如" 25,28,31,94,95 "..:)

我做过类似的事情，尽管使用排序表(顺序在我的应用程序中很重要)，排序表是基于可拖放的。目前我们的网络连接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调用。当项目被添加/删除时，可能有事件处理程序，但没有访问网站，我无法检查文档。

相关文章：