Question

我有2个sortables元素列表，我需要能够将列表中的项目拖到另一个列表中：

我试过这样做，但似乎它无法正常工作。

我的代码：

<div class="sortableCard"> 
    <div   class="draggable">car 5</div>
    <div   class="draggable">car 6</div> 
</div>

<div class="sortableCard"> 
    <div  class="draggable">car 1</div>
    <div class="draggable">car 2</div>
    <div class="draggable">car 3</div>
</div>

$(function() {
    $(".sortableCard").sortable({
        revert: true
    });

    $(".draggable").draggable({
        connectToSortable:'.sortableCard',
        revert: "invalid"
    });
});

小提琴：http://jsfiddle.net/MxrrZ/

Answer 1

查看http://jqueryui.com/sortable/#connect-lists

$( ".sortableCard" ).sortable({
  connectWith: ".sortableCard"
}).disableSelection();

Answer 2

您需要将列表分开，然后将所有项目从顶部列表拖到底部列表。

<body>
    <div class="sortableCard1">
        <div class="draggable">car 5</div>
        <div class="draggable">car 6</div>
    </div>
    <div class="sortableCard2" style="padding-top:40px">
        <div class="">car 1</div>
        <div class="">car 2</div>
        <div class="">car 3</div>
    </div>
</body>

 $(function () {
     $(".sortableCard1").sortable({
         revert: true
     });

      $(".sortableCard2").sortable({
         revert: true
     });

     $(".draggable").draggable({
         connectToSortable: '.sortableCard2',
         revert: "invalid"
     });
 });

如何将可排序元素拖动到其他可排序元素中

2 个答案: