jquery-ui - JQuery UI Sortable : how to make items have droppable behavior (ex. hoverClass)？

Question

我正在为 Web 应用程序使用 JQuery UI 的拖放功能。

我有以下 HTML 结构:

<div id="list">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>

和 Javascript:

$('#list').sortable({containment: 'parent'});

当我拖动、移动和放下一个项目时，所有项目都很好地垂直对齐，我喜欢它。

现在我希望当我将一个项目拖动并悬停在另一个项目上时，下面的项目可以显示一些类似于 JQuery UI 的 Droppable 中可用的 hoverClass 的视觉效果。

我该怎么做？

谢谢和问候!

Answer 1

对于 hoverClass你可以用 over 做一些类似的事情和 out方法。 start和 stop也可以帮助你。

 $('.sortable').sortable({ 
    over : function(){
         $(this).addClass('valid');
     },
     out : function(){
          $(this).removeClass('valid');
     }
});