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

在stop，changeable中可以使用position和originalPosition值。这两个都包含top，left值。您可以比较originalPosition和position中的最高值，以了解该项目是上移还是下移

参考： 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 - 检测项目是否在列表中向上或向下移动

2 个答案: