交換使用jQuery排序

Question

我有多個connectedSortable部分，每div有一個div.widget它內部的，如下兩個div：

<div class="row"> 
     <section class="col-xs-4 col-sm-4 col-md-4 col-lg-4 connectedSortable"> 
      <div class="widget">Widget 1</div> 
     </section> 

     <section class="col-xs-4 col-sm-4 col-md-4 col-lg-4 connectedSortable"> 
      <div class="widget">Widget 2</div> 
     </section> 

     <section class="col-xs-4 col-sm-4 col-md-4 col-lg-4 connectedSortable"> 
    <div class="widget">Widget 3</div> 
     </section> 
    </div> 
    <div class="row"> 
     <section class="col-xs-3 col-sm-3 col-md-3 col-lg-3 connectedSortable"> 
     <div class="widget">Widget 4</div> 
     </section> 

     <section class="col-xs-3 col-sm-3 col-md-3 col-lg-3 connectedSortable"> 
     <div class="widget">Widget 5</div> 
     </section> 

     <section class="col-xs-3 col-sm-3 col-md-3 col-lg-3 connectedSortable"> 
     <div class="widget">Widget 6</div> 
     </section> 

     <section class="col-xs-3 col-sm-3 col-md-3 col-lg-3 connectedSortable"> 
     <div class="widget">Widget 7</div> 
     </section> 
    </div> 

使用排序的jQuery插件，它會插入拖格成connectedSortable部分代替交換。

我想要做的是，而不是在connectedSortable部分插入該div，我想與它在connectedSortable部分內的div交換。

而當connectedSortable部分內部沒有div.widget時，我只能刪除一個div.widget，因爲它已經是空的，所以不需要交換。

我該怎麼做？

這是我所試過的jsfiddle： http://jsfiddle.net/pus4aff6/

Answer 1

我創造，我用start和receive事件工作如下解決方案：

start: function(event, ui){ 
         ui.item.startPos = ui.item.index(); 
        }, 
        receive: function(event, ui) { 
         var source = ui.sender; 
         var target = $(this); 
         var draggedItem = ui.item; 
         if(target.attr('id') !== 'widgets-container'){ 
          if(target.find('div.widget').length >= 2){ 
           if(source.is('#widgets-container')){ 
            draggedItem.remove(); 
            if(ui.item.startPos === 0) { 
             source.prepend(draggedItem); 
            }else{ 
             source.children().eq(ui.item.startPos-1).after(draggedItem); 
            } 
           }else{ 
            var elementToSwap = target.find('div.widget').not(draggedItem)[0]; 
            source.html(elementToSwap); 
           } 
          } 
         } 
        } 

這裏更新的jsfiddle：http://jsfiddle.net/frgj5qmm/

Answer 2

我不會用自舉行此微但是基於jQuery UI Sortable description用CSS Flexbox的創建自己的網格。

$(function() { 
 
    $("ul").sortable().disableSelection(); 
 
});

ul{ 
 
    list-style-type: none; /* remove bullets */ 
 
    display: flex; /* flexbox */ 
 
    flex-wrap: wrap; /* multiple lines */ 
 
    align-items: stretch; 
 
} 
 
li{ 
 
    flex-grow: 1; /* stretch box width */ 
 
    width: 20vw; /* 20vw is 20% of the browser width, you can replace it with an absolute value */ 
 
    min-height:50px; 
 
    cursor:move; 
 
} 
 
/* remove margin & padding for this demo */ 
 
body, ul{ 
 
    margin: 0; 
 
    padding: 0; 
 
}

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> 
 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script> 
 

 
<ul> 
 
    <li class="ui-state-default">Widget 1</li> 
 
    <li class="ui-state-default">Widget 2</li> 
 
    <li class="ui-state-default">Widget 3</li> 
 
    <li class="ui-state-default">Widget 4</li> 
 
    <li class="ui-state-default">Widget 5</li> 
 
    <li class="ui-state-default">Widget 6</li> 
 
    <li class="ui-state-default">Widget 7</li> 
 
    <li class="ui-state-default">Widget 8</li> 
 
    <li class="ui-state-default">Widget 9</li> 
 
    <li class="ui-state-default">Widget 10</li> 
 
    <li class="ui-state-default">Widget 11</li> 
 
</ul>

取出類ui-state-default使用自己設計的，而不是jQuery UI的。