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

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

javascript jquery jquery-ui

Javascript 如何将可排序元素拖动到其他可排序元素中,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我有两个可排序元素列表，我需要能够将一个项目从列表拖到另一个列表：我已经试过了，但似乎不能正常工作我的代码： <div class="sortableCard"> <div class="draggable">car 5</div> <div class="draggable">car 6</div> </div> <div class="sortableCard">

我有两个可排序元素列表，我需要能够将一个项目从列表拖到另一个列表：

我已经试过了，但似乎不能正常工作

我的代码：

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


汽车5
车6
汽车1
汽车2
汽车3
$（函数（）{
$（“.sortableCard”）.sortable({
回复：真
});
$（“.draggable”）.draggable({
connectToSortable:“.sortableCard”，
回复：“无效”
});
});

Fiddle:

您需要像这样分隔列表，然后将所有项目从顶部列表拖到底部列表

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


汽车5
车6
汽车1
汽车2
汽车3
$（函数（）{
$（“.sortableCard1”）.sortable({
回复：真
});
$（“.sortableCard2”）.sortable({
回复：真
});
$（“.draggable”）.draggable({
connectToSortable:'.sortableCard2'，
回复：“无效”
});
});

看一看

谢谢，这很有效！！但有一件事，当一个列表变为空时，我们不能再拖进去，我尝试添加“dropOnEmpty:true”，但它不起作用，我们如何修复它？dropOnEmpty默认为true。你的问题是，你没有任何物理空间可以降落。在sortableCard类中添加一个填充，然后当所有div都离开它时，就有了一些内容。

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