JQuery UI Sortable：如何使项目具有可放置的行为（例如hoverClass）？答案

【问题标题】：JQuery UI Sortable: how to make items have droppable behavior (ex. hoverClass)?JQuery UI Sortable：如何使项目具有可放置的行为（例如hoverClass）？
【发布时间】：2013-09-01 14:47:07
【问题描述】：

我正在为 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 的视觉效果。

我该怎么做？

感谢和问候！

【问题讨论】：

我认为这在可排序中是不可能的。您可以获得的最接近的是占位符属性，它指示可以删除项目的位置

标签： jquery-ui jquery-ui-sortable droppable

【解决方案1】：

对于hoverClass，您可以使用over 和out 方法执行类似的操作。 start 和 stop 也可以帮助您。

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

【讨论】：

非常感谢您的意见。我尝试过这个。 $(this).addClass('valid') 影响整个排序列表，而不是被丢弃的问题。问候。
使用receive 方法可以访问被删除的元素。
当一个对象悬停在 SAME 可排序列表中的一个对象上时，似乎没有调用接收事件。

【解决方案2】：

如前所述，$(this) 指向您悬停在 over 类型事件上的当前可排序对象。用jQuery实现可排序悬停最可靠的方法如下：

$('#some-element').sortable({
    start: {
        ui.item.parent().addClass('sortable-hover');
    },
    over: {
        $('.sortable-hover').removeClass('sortable-hover');
        $(this).addClass('sortable-hover');
    },
    stop: {
        ui.item.parent().removeClass('sortable-hover');
    }
});

您可以根据需要添加更多逻辑。

希望对你有帮助， ——何塞

【讨论】：

【解决方案3】：

我希望这就是你要找的东西

$('#list').sortable({
    containment: 'parent',
    start: function() {
        $(this).addClass('sortable-hover');
    },
    over: function() {
        $('#list').removeClass('sortable-hover');
        $(this).addClass('sortable-hover');
    },
    stop: function) {
        $('#list').removeClass('sortable-hover');
    },
});

【讨论】：