拖放從一列到另一個使用jQuery

Question

下降，我需要從一列拖動項目拖放到另一個使用jQuery

的例子有沒有這樣的例子在那裏？

Answer 1

您可以使用jQuery排序做到這一點：使用jQuery UI的排序http://jqueryui.com/demos/sortable/#connect-lists

Answer 2

在這裏，我已經做了完整的垃圾箱。我認爲它應該對你有所幫助。

演示：http://codebins.com/bin/4ldqp9g

HTML：

<div class="demo"> 
    <ul id="sortable1" class="connectedSortable"> 
    <li class="ui-state-default"> 
     Item 1 
    </li> 
    <li class="ui-state-default"> 
     Item 2 
    </li> 
    <li class="ui-state-default"> 
     Item 3 
    </li> 
    <li class="ui-state-default"> 
     Item 4 
    </li> 
    <li class="ui-state-default"> 
     Item 5 
    </li> 
    </ul> 
    <ul id="sortable2" class="connectedSortable"> 
    <li class="ui-state-highlight"> 
     Item 1 
    </li> 
    <li class="ui-state-highlight"> 
     Item 2 
    </li> 
    <li class="ui-state-highlight"> 
     Item 3 
    </li> 
    <li class="ui-state-highlight"> 
     Item 4 
    </li> 
    <li class="ui-state-highlight"> 
     Item 5 
    </li> 
    </ul> 

</div> 
<!-- End demo --> 
<div class="demo-description"> 
    <p> 
    Sort items from one list into another and vice versa, by passing a selector 
    into the 
    <code> 
     connectWith 
    </code> 
    option. The simplest way to do this is to 
    group all related lists with a CSS class, and then pass that class into the 
    sortable function (i.e., 
    <code> 
     connectWith: '.myclass' 
    </code> 
    ). 
    </p> 
</div> 

CSS：

#sortable1, #sortable2 
{ 

    list-style-type: none; 

    margin: 0; 

    padding: 0 0 2.5em; 

    float: left; 

    margin-right: 10px; 

} 
#sortable1 li, #sortable2 li 
{ 

    margin: 0 5px 5px 5px; 

    padding: 5px; 

    font-size: 1.2em; 

    width: 120px; 

    overflow:visible; 
    display:block; 

} 

JQuery的：

$(function() { 
    var itemclone, idx; 
    $("#sortable1, #sortable2").sortable({ 
     start: function(event, ui) { 
      //create clone of current seletected li 
      itemclone = $(ui.item).clone(); 
      //get current li index position in list 
      idx = $(ui.item).index(); 
      //If first li then prepend clone on first position 
      if (idx == 0) { 
       itemclone.css('opacity', '0.5'); 
       $(this).prepend(itemclone); 
      } 
      //Else Append Clone on its original position 
      else { 
       itemclone.css('opacity', '0.7'); 
       $(this).find("li:eq(" + (idx - 1) + ")").after(itemclone); 
      } 

     }, 
     change: function(event, ui) { 
      //While Change event set clone position as relative 
      $(this).find("li:eq(" + idx + ")").css('position', 'relative'); 

     }, 
     stop: function() { 
      //Once Finish Sort, remove Clone Li from current list 
      $(this).find("li:eq(" + idx + ")").remove(); 
     }, 
     connectWith: ".connectedSortable" 
    }).disableSelection(); 
}); 

演示：http://codebins.com/bin/4ldqp9g