Question

我正在使用JQuery droppable容器来删除其他元素。用户鼠标悬停在容器上时添加的hoverClass。在这个类中，我设置了容器的新宽度。但是当鼠标离开容器时，没有考虑这个新的宽度。由于容器具有旧宽度，因此触发事件。更奇怪的是，如果我非常缓慢地移动拖动元素，则考虑新的容器宽度。

我在这里做了小提琴的例子： http://jsfiddle.net/SLGdE/709/

在Chrome和FF中测试过。

如何实现新的可放置容器宽度？

$(function() {
    $("#draggable").draggable({
      revert:true
    });

    $("#droppable").droppable({
        tolerance: "pointer",
        hoverClass: "over"
    });
});

Answer 1

您需要添加一个类并对其进行自定义。来自jQueryUi documentation：

$( "#droppable" ).droppable({
  drop: function( event, ui ) {
    $( this )
      .addClass( "ui-state-highlight" )
  }
});

Answer 2

试试这个http://jsfiddle.net/SLGdE/710/：

$(function() {
$( "#draggable" ).draggable({revert:true});
$( "#droppable" ).droppable({
    tolerance: "pointer",
    hoverClass: "over",
    over:function(event, ui){
        $(this).width($(this).width());//This is the update
    },
    out:function(event, ui){
        //alert("out")        
    }
 });
});

Answer 3

将值refreshPositions的{{1}}添加到true。但请注意，每https://api.jqueryui.com/draggable/#option-refreshPositions次性能会受到影响。因此，您的解决方案可能是更好的选择，但也许这个答案可以帮助其他人。

draggable

JQuery droppable out事件触发得太早

3 个答案: