jquery-ui - この状況では、制約されたドラッグ可能はドロップ可能で over() をトリガーするべきではありませんが、

Question

jQueryUI のドラッグ アンド ドロップに問題があります。

この jsFiddleは、私が予期しない動作を示しています。赤いボックスは x 軸に制限されていますが、ドロップ可能な要素の 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

バグのようです...オーバー機能が実際のドラッグ可能な要素ではなくカーソルに関連付けられているように見えますが、他の多くのインスタンスでも発生するようです...

考えられる回避策をいくつか見つけました。

• 次のようにドラッグ可能オブジェクトに包含オプションを追加します。

実施例

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