Question

我正在使用JQuery UI拖放Web应用程序。

我有以下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的视觉效果。

我该怎么做？

谢谢和问候！

Answer 1

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

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

JQuery UI Sortable：如何使项目具有droppable行为（例如hoverClass）？

3 个答案: