jQuery sortable - 检测项目是否在列表中向上或向下移动

Question

想知道当您使用 jQuery 可排序选项时，是否有检测项目是否在列表中向上或向下移动的方法。

我在下面有一个简单的示例，它在项目移动时显示一条警告消息。但是我想知道移动的项目是否在列表中上升或下降。

$( function() {
    $( "#sortable" ).sortable({
    change: function (event, ui) {
            alert('Leg Moved.')
        }
    });
    $( "#sortable" ).disableSelection();
  } );

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
 #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; border:1px solid }
 #sortable li span { position: absolute; margin-left: -1.3em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="sortable">
  <li class="ui-state-default"><span></span>Item 1</li>
  <li class="ui-state-default"><span></span>Item 2</li>
  <li class="ui-state-default"><span></span>Item 3</li>
  <li class="ui-state-default"><span></span>Item 4</li>
  <li class="ui-state-default"><span></span>Item 5</li>
  <li class="ui-state-default"><span></span>Item 6</li>
  <li class="ui-state-default"><span></span>Item 7</li>
</ul>

Answer 1

sortable的stop,change函数中有position和originalPosition值可用。这两个都包含顶部和左侧的值。你可以比较originalPosition和position中的top值来知道item是向上移动还是向下移动

参考： https://api.jqueryui.com/sortable/#event-stop

示例：

$(document).ready(function() {
    $(function() {
        $("#sortable").sortable({
            change: function(event, ui) {
                var movement = ui.position.top - ui.originalPosition.top > 0 ? "down" : "up";
            }
        });
        $("#sortable").disableSelection();
    });
});

Answer 2

如果你需要知道一个移动与之前的变化事件相比是向上还是向下，你可以将最新的索引（序列号）存储为可排序的数据，并在下一个变化事件中使用它进行比较，之后您再次更新它：

$( function() {
  $( "#sortable" ).sortable({
    start: function (event, ui) {
      $(this).data('idx', ui.item.index());
    },
    change: function (event, ui) {
      var idx = ui.placeholder.prevAll().filter(':not(.ui-sortable-helper)').length;
      // print relative change in index: negative is up, positive is down
      console.log(idx - $(this).data('idx')); 
      $(this).data('idx', idx);
    }
  });
  $( "#sortable" ).disableSelection();
});

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; border:1px solid }
#sortable li span { position: absolute; margin-left: -1.3em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="sortable">
  <li class="ui-state-default"><span></span>Item 1</li>
  <li class="ui-state-default"><span></span>Item 2</li>
  <li class="ui-state-default"><span></span>Item 3</li>
  <li class="ui-state-default"><span></span>Item 4</li>
  <li class="ui-state-default"><span></span>Item 5</li>
  <li class="ui-state-default"><span></span>Item 6</li>
  <li class="ui-state-default"><span></span>Item 7</li>
</ul>

jQuery sortable - 检测项目是否在列表中向上或向下移动

jQuery sortable - Detect if item has moved up or down the list

jquery

jquery-ui-sortable