jquery-ui - 在这种情况下，受约束的可拖动不应该在 droppable 中触发 over()，但是

Question

我对 jQueryUI 的拖放有疑问。

这个 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函数与光标相关联，而不是实际的可拖动元素，似乎也发生在许多其他实例中......

我发现了几个可能的解决方法：

• 像这样将包含选项添加到可拖动对象：

工作示例

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

• 将整个东西放入悬停函数中，并在未悬停时销毁可拖动对象：

工作示例

$(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");
    });
});