Jquery ui JQuery UI可排序：如何使项具有可拖放行为（例如hoverClass）？

我正在使用jQueryUI的拖放功能来实现一个web应用程序

我有以下HTML结构：

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

当我拖放一个项目时，所有项目都垂直对齐，我喜欢这样

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

我怎么做

---

谢谢和问候

对于

hoverClass

您可以使用

over

和

out

方法执行类似的操作。

启动

和

停止

也可以帮助您

$（'.sortable'）.sortable（{
结束：函数（）{
$（this.addClass（'valid'）；
},
输出：函数（）{
$（this.removeClass（'valid'）；
}
});

如前所述，

$（此）

指向您在

上悬停的当前可排序的事件。
使用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');
    }
});

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

希望有帮助，
--何塞
我希望这就是你要找的

$('#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');
    },
});

我认为这在分类中是不可能的。您能得到的最接近的是占位符属性，它指示项目可以放在哪里。非常感谢您的输入。我试过了$（this）.addClass（'valid'）影响整个排序列表，而不是被忽略的问题。注意。使用
receive
方法，您可以访问正在删除的元素。当一个对象悬停在同一个可排序列表中的某个对象上时，似乎不会调用receive事件。
$('#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');
    },
});