javascript - JQuery 可丢弃事件触发太早

Question

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

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

在 Chrome 和 FF 中测试。

我怎样才能考虑到可放置容器的新宽度？

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

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

Answer 1

试试这个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 2

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

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

Answer 3

为您refreshPositions的. 但是请注意，每个https://api.jqueryui.com/draggable/#option-refreshPositions都会对性能造成影响。因此，您的解决方法可能是一个更好的选择，但也许这个答案可以帮助其他人。truedraggable

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