0

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

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

我的代码：

<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/

4

2 回答 2

1

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

$( ".sortableCard" ).sortable({
  connectWith: ".sortableCard"
}).disableSelection();
于 2013-07-23T00:00:38.420 回答
0

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

<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"
     });
 });
于 2013-07-22T23:26:18.083 回答