Question

使用jQuery UI可排序，是否有一种方法可以获取拖动项目后面的元素？

如果我有5个项目并开始拖动其中一个项目，而我超过另一个项目我应该能够触发一个mouseenter事件......但似乎这种事件在拖动时没有触发。

为了更好地了解我正在谈论的内容，请参阅此示例：将鼠标移到项目上，您将看到一个红色虚线边框，现在开始拖动一个项目，其余部分将不再显示红色边界。

我想检索哪个项目位于当前可拖动的后面。（红色边框只是一个插图，我会执行一些js代码）

HTML

<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

CSS

  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
  html>body #sortable li { height: 1.5em; line-height: 1.2em; }
  .ui-state-highlight { height: 1.5em; line-height: 1.2em; }

  .red_border{border: 1px dotted red;}

JS

  $( function() {
    $( "#sortable" ).sortable({
      placeholder: "ui-state-highlight"
    });
    $( "#sortable" ).disableSelection();

    $("li").mouseenter(function()
    {
        $(this).addClass("red_border");
    });

    $("li").mouseleave(function()
    {
        $(this).removeClass("red_border");
    });    
  } );

FIDDLE：https://jsfiddle.net/d12j7qw3/

让项目落后于可排序

0 个答案: