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

How can I drag sortable element into an other sortables elements

本文关键字：元素 排序 其他 拖动      更新时间：2023-09-26

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

我试过做，但似乎不正确。

我的代码：

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

Fiddle：http://jsfiddle.net/MxrrZ/

看看http://jqueryui.com/sortable/#connect-列出

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

您需要像这样分离列表，然后将任何项目从顶部列表拖动到底部列表。

<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"
     });
 });
相关文章：