jquery-ui - JQuery UI Sortable：如何使项目具有可放置的行为（例如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做一些类似的事情。和也可以帮助你。overoutstartstop

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

Answer 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');
    }
});

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

希望它有所帮助，--何塞

Answer 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');
    },
});