使用jQuery实现拖放功能

Question

我有两个基于jQuery的列表，示例是here。 我需要完全相同的功能，但稍作更改如下：

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

如何做到这一点？我们可以自定义上述jQuery库吗？还是有其他任何JavaScript库都可以，对我来说也没问题。

请帮忙。

- Java Questions

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个瓷砖组：

您需要稍微修改此实现，以在单击“GetItems”之后获取项目。

请参考以下链接： http://jsfiddle.net/dazefs/XRdz6/ http://jsfiddle.net/dazefs/vGYVX/

- Darren

---

谢谢你的帖子，这正是我想要的。但是如何获取从列表A移动到列表B的可用项（仅限于列表B）？ - Java Questions

@Anto - 你需要保持一个可以移动的项目集合，这可以通过使用数组来处理。然后在可排序的接收函数中，您可以检查所选的项目是否可以移动，如果不能，则显示错误。 - Darren

没有限制将项目从一个列表拖到另一个列表中。当用户单击保存（获取项目）时，我必须保存列表B中可用的所有项目（这些项目已从列表A移动）。就像您提供的示例中的“span”一样，我们可以为“span”指定ID和值吗？请给我提供一个示例。请不要介意。 - Java Questions