在这种情况下，受限制的draggable不应该在droppable中触发over（），但确实如此

Question

我遇到了jQueryUI的拖放问题。

This jsFiddle显示了我不期望的行为：即使红色框被约束到x轴，当指针进入时，仍会调用droppable的over（）处理程序，而不是被拖动的元素本身与它相交。

这是一个jQueryUI错误吗？如果是，是否有解决方法？

 $(function() {
     $( "#draggable" ).draggable({
         axis: 'x'  // Constrain drag
     });
    $( ".over" ).droppable({
      tolerance: 'intersect',  // Surely should not trigger "over()" unless dragged object itself is over the element??
      over: function( event, ui ) {
        $( this )
          .find( "p" )
            .html( "over!" );
      }
    });
  });

Answer 1

似乎是一个错误......看起来over函数与光标绑定而不是实际的可拖动元素，似乎也出现在许多其他实例中......

我找到了几种可能的解决方法：

• 将containment option添加到draggable中，如下所示：

Working Example

 $(function () {
     $("#draggable").draggable({
         axis: 'x',
         containment: 'parent'
     });
     $(".over").droppable({
         tolerance: 'intersect',
         over: function (event, ui) {
             $(this)
                 .find("p")
                 .html("over!");
         }
     });
 });

• 当它没有被徘徊时，把整个东西扔进hover function和destroy可拖动的东西：

<强> Working Example

$(function () {
    $("#draggable").hover(function () {
        $("#draggable").draggable({
            axis: 'x'
        });
        $(".over").droppable({
            tolerance: 'intersect',
            over: function (event, ui) {
                $(this)
                    .find("p")
                    .html("over!");
            }
        });
    }, function () {
        $("#draggable").draggable("destroy");
    });
});