jQuery UI Sortable：排序时不改变项目的顺序

Question

默认情况下，在排序时，项目会被替换（例如，如果我将第三个元素移动到第一个元素，则第一个和第二个元素将向下移动）

我不需要这种行为。我希望元素在完成排序（释放鼠标）时不要更改顺序。

我需要这个，因为我想询问用户是否想要更改元素或重新排序？

PS 选项 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>

在 JSFiddle 上查看