jQueryUI拖放列表 - 两种方式？

我一直在寻找通过jQueryUI的的可拖动和投掷的的文档。我发现了各种方式可以将列表拖放到另一个列表，但不是两种方式？jQueryUI拖放列表 - 两种方式？

我的情况是，我有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网址应执行 - 就像

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来得到正确的序列化的数据：{}？

编辑：

得到它！

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

现在，当我REQUEST.FORM（ “串”）在functions.asp我得到 “25，28，31，94，95” 等一系列的id的.. :)

来源

2011-10-05 Behrens

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

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

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

由于这是基于sortables而不是阻力，droppables我推检查和Ajax函数调用，而不是一个匿名函数，这些函数应该检查如果更新的添加/删除或者只是一个重新排序并有条件地让你的ajax调用。可能有事件处理程序用于何时添加/删除项目，但无法访问站点我无法查看文档。

来源

2011-10-05 10:51:15 Chao

检查我的问题的编辑。我添加了更多的代码。现在我似乎无法通过AJX：s获得正确的序列化数据 – Behrens

jQueryUI拖放列表 - 两种方式？

回答

相关问题