jQuery UI可排序：在排序時不會改變項目的順序

Question

默認情況下，在排序時，項目被替換（例如，如果我拿第三個元素並將它移動到第一個元素，比第一個元素更靠前，第二個元素將向下移動）

我不需要這種行爲。我希望元素不要改變順序，而我完成排序（釋放鼠標）。

我需要這個，因爲我想問問用戶他是要更改元素還是重新排序？

P.S.選項tolerance只有2個選項，在這種情況下它們不起作用。

Answer 1

我的意思是這樣的（排序列表與替換元素的選項）：

$(function() { 
 

 
    var 
 

 
    /** 
 
    * Sortable List, that can insert or replace elements 
 
    */ 
 
    SortableList = (function() { 
 

 
     var 
 

 
     // Configuration of Sortable list 
 
     // css classes of separator and sortable elements 
 
     // jQuery UI droppable and sortable init configuration 
 
     CONFIG = { 
 

 
      'confirm-message': 'Insert? Element will be removed', 
 

 
      'separator-class': 'sortable-separator', 
 
      'sortable-class': 'sortable-elem', 
 

 
      // Initialization of jQuery UI Droppable 
 
      'separators-droppable-init': { 
 
      drop: function(e, ui) { 
 
       // Insertation 
 
       var drag = ui.draggable, 
 
       drop = $(this), 
 
       a = drop.prev(), 
 
       b = drop.next(); 
 

 
       Separators.clean(); 
 
       Elements.insert(a, b, drag); 
 
       Separators.init(); 
 
      }, 
 
      over: function(e, ui) { 
 
       $(this).css({ 
 
       'background-color': 'lightgreen' 
 
       }); 
 
      }, 
 
      out: function(e, ui) { 
 
       $(this).css({ 
 
       'background-color': 'white' 
 
       }); 
 
      } 
 
      }, 
 

 
      'sortable-droppable-init': { 
 
      drop: function(e, ui) { 
 
       // Replace 
 
       var drag = ui.draggable, 
 
       drop = $(this); 
 

 
       if (Elements.replace(drop, drag)) { 
 
       Separators.init(); 
 
       } 
 
      } 
 
      }, 
 
      'sortable-draggable-init': { 
 
      revert: true, 
 
      start: function(e, ui) { 
 
       $(this).css({ 
 
       'z-index': '999', 
 
       'cursor': 'move' 
 
       }); 
 
      }, 
 
      stop: function(e, ui) { 
 
       $(this).css({ 
 
       'z-index': '1', 
 
       'cursor': 'default' 
 
       }); 
 
      } 
 
      } 
 
     }, 
 

 
     getSeparators = function() { 
 
      return $('.' + CONFIG['separator-class']); 
 
     }, 
 

 
     getSortables = function() { 
 
      return $('.' + CONFIG['sortable-class']); 
 
     }, 
 

 
     /** 
 
     * Separators Handler 
 
     */ 
 
     Separators = (function() { 
 

 
      var 
 
      // create separator html element 
 
      _create = function() { 
 
       return $('<div />').addClass(CONFIG['separator-class']); 
 
      }, 
 

 
      // create all separators and insert them 
 
      createAll = function() { 
 
       getSortables().each(function() { 
 
       $(this).before(_create()); 
 
       }).last().after(_create()); 
 
       return Separators; 
 
      }, 
 

 
      // remove all separators 
 
      clean = function() { 
 
       var s = getSeparators(); 
 
       if (s.length) { 
 
       s.remove(); 
 
       } 
 
       return Separators; 
 
      }, 
 

 
      // init jQuery UI Droppable interface 
 
      initDroppable = function() { 
 
       getSeparators().droppable(CONFIG['separators-droppable-init']); 
 
       return Separators; 
 
      }, 
 

 
      // Initialization of separators 
 
      init = function() { 
 
       if (getSeparators().length) { 
 
       Separators.clean(); 
 
       } 
 
       return Separators.createAll().initDroppable(); 
 
      }; 
 

 
      // Return result  
 
      Separators = { 
 
      clean: clean, 
 
      createAll: createAll, 
 
      init: init, 
 
      initDroppable: initDroppable 
 
      }; 
 

 
      return Separators; 
 
     }()), 
 

 

 
     Elements = (function() { 
 
      var 
 

 
      init = function() { 
 
       getSortables().droppable(CONFIG['sortable-droppable-init']).draggable(CONFIG['sortable-draggable-init']); 
 
       return Elements; 
 
      }, 
 

 
      // replaces element A with element B 
 
      replace = function(A, B) { 
 

 
       if (!confirm(CONFIG['confirm-message'])) { 
 
       return false; 
 
       } 
 
       B.draggable("option", "revert", false).css({ 
 
       top: 0, 
 
       left: 0 
 
       }); 
 
       A.replaceWith(B); 
 
       return Elements; 
 
      }, 
 

 
      // insert element C between elements A and B 
 
      insert = function(A, B, C) { 
 
       C.draggable("option", "revert", false).css({ 
 
       top: 0, 
 
       left: 0 
 
       }); 
 
       if (!A.length) { 
 
       B.before(C); 
 
       } else { 
 
       A.after(C); 
 
       } 
 
       return Elements; 
 
      }, 
 

 
      // result to return 
 
      Elements = { 
 
       init: init, 
 
       replace: replace, 
 
       insert: insert 
 
      }; 
 

 
      return Elements; 
 

 
     }()), 
 

 
     init = function() { 
 
      Separators.init(); 
 
      Elements.init(); 
 
     }; 
 

 
     return { 
 
     init: init 
 
     }; 
 
    }()); 
 

 
    SortableList.init(); 
 

 
});

.sortable-elem { 
 
    width: 32px; 
 
    height: 32px; 
 
    background-color: darkred; 
 
    border: 1px solid brown; 
 
    color: white; 
 
} 
 

 
.sortable-separator { 
 
    width: 100px; 
 
    height: 16px; 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> 
 
<link href="//code.jquery.com/ui/1.8.16/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="//code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script> 
 

 
<div class="sortable-elem" data-order="1">1</div> 
 
<div class="sortable-elem" data-order="2">2</div> 
 
<div class="sortable-elem" data-order="3">3</div> 
 
<div class="sortable-elem" data-order="4">4</div> 
 
<div class="sortable-elem" data-order="5">5</div> 
 
<div class="sortable-elem" data-order="6">6</div> 
 
<div class="sortable-elem" data-order="7">7</div> 
 
<div class="sortable-elem" data-order="8">8</div> 
 
<div class="sortable-elem" data-order="9">9</div> 
 
<div class="sortable-elem" data-order="10">10</div>

View on JSFiddle