jquery-ui - JQuery UI 可排序 : how to make items have droppable behavior (ex.悬停类)?

标签 jquery-ui jquery-ui-sortable droppable

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

我有以下 HTML 结构:

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

和 Javscript:

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

当我拖动、移动和放下项目时,所有项目都很好地垂直对齐,这是我喜欢的。

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

我该怎么做?

感谢和问候!

最佳答案

对于hoverClass,您可以使用overout 方法执行类似的操作。 startstop 也可以帮助您。

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

关于jquery-ui - JQuery UI 可排序 : how to make items have droppable behavior (ex.悬停类)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18559526/

相关文章:

jQuery UI Draggable/Sortable - 动态添加的项目不可拖动

jquery - 是否可以将 Bootstrap 流体网格布局系统与 jQuery UI 可排序功能结合使用?

javascript - JQuery UI 禁用可排序列表中的重新排序

javascript - 使用 Jquery 三个文本框中的日期范围?

jquery - 使用 jquery ui-sortable 排序时出现奇怪的绿色/黄色背景

jQuery Sortable - 当新元素拖入列表时保存顺序

Jquery:优化 MouseOver 上的 Droppable

javascript - 更改拖动对象并在放置后恢复它

jquery - 复制 Jquery Draggable

javascript - 无法使 jQuery UI Sortable 正常工作