javascript - 使用 jquery 拖放

Question

我有两个基于 jquery 的列表，示例在这里我需要完全相同的功能，但有如下细微变化：

根据上面的内容，当我单击时，Get items我会得到所有可排序的项目值，但我想要的是从列表 A 中拖动并将它们放到列表 B 中，反之亦然，如果我单击获取项目，我应该只获得列表 B 上的可排序项目而不是来自列表 A。

如何做到这一点，我们可以自定义上面的 jquery 库还是有任何其他的库，即使它们在 java 脚本中对我来说也很好。

请帮忙。

Answer 1

我过去做过类似的事情，这就是我实现它的方式：http: //jsfiddle.net/dazefs/vGYVX/

<div style="background-color:Gray">

<ul id="sortable">
    <li>
      <span style="background-color:yellow">
         Item 1
       </span>

     </li>
    <li>
     <span style="background-color:red">
       Item 2
     </span>

    </li>
    <li>
      <span style="background-color:green">
     Item 3
     </span>

  </li>
    <li>
    <span style="background-color:Blue">
           Item 4
     </span>
     </li>
   </ul>

<ul id="sortable2" style="width:60%">
<li>
    <span style="background-color:yellow">
        Item 5
    </span>
</li>
    <li>
    <span style="background-color:red">
        Item 6
    </span>
</li>
    <li>
    <span style="background-color:green">
        Item 7
    </span>
   </li>
    <li>
       <span style="background-color:Blue">
          Item 8
       </span>
   </li>
</ul>

 </div>

$(function () {
    $("#sortable, #sortable2").sortable({
        connectWith: "#sortable2, #sortable",
        receive: function (event, ui) {
             alert('item has been sorted');
         }
    });

    //})
});

要实现 3 个瓦片组：

http://jsfiddle.net/dazefs/XRdz6/

http://jsfiddle.net/dazefs/vGYVX/

单击“GetItems”后，您必须稍微修改此实现以合并获取项目。