6

ドラッグ可能オブジェクトをドラッグすると、ドロップ可能オブジェクトの背後にあり、互いに重なり合っているにもかかわらず、ドロップ可能オブジェクトを含む要素がトリガーされ続けます (これもドロップ可能であるため)。ドロッパブルの間に隙間があるように振る舞っていますが、隙間はありません。

jsFiddleで例を作成しました。問題のある動作のスクリーンショットを次に示します。

.parent にパディングを追加すると (たとえばpadding: 0.2em 0.2em 0em 0.2em、動作はさらに悪化します。

4

1 に答える 1

1

まず第一に、この数か月で解決策を見つけていただければ幸いです。私はこの期間に jQueryUI を使用していて、答えを見つけようとするのは良い練習になると思ったので、これに答えています。また、未回答の質問は嫌いです^_^

残念ながら、ブラウザは、これらの.child要素の間*overに.parent. 私が思いついた唯一のアイデアは、dropoverイベントが親でトリガーされたときに、マウスの位置が実際に子要素内にあるかどうかを検出しようとすることです。その場合、accepting_dropsクラスを親要素ではなく子要素に与える必要があります。

コードは次のとおりです (ソリューションの動作を示すためにjsFiddleを作成しました)。

HTMLとCSSは変更されていないので、二度とコピーしません

Javascript

$('.dragme').draggable({
    helper: 'clone' 
});

$('.parent,.child').droppable({
    greedy: true,
    tolerance: 'pointer',
});

$(".parent").on("dropover", function(event, ui) {
    var first = $(".child:first");
    var last = $(".child:last");

    if((event.originalEvent.pageX > first.offset().left) &&
        (event.originalEvent.pageY > first.offset().top) &&
        (event.originalEvent.pageX <= (last.offset().left + last.width())) &&
        (event.originalEvent.pageY <= (last.offset().top + last.height()))) {
        $(this).removeClass("accepting_drops");
    }
    else {
        $(this).addClass("accepting_drops");
        $(".child").removeClass("accepting_drops");
    }
}).on("dropout", function() {
    $(this).removeClass("accepting_drops");
});

$(".child").on("dropover", function() {
    $(".parent").removeClass("accepting_drops");
    $(".child").removeClass("accepting_drops");
    $(this).addClass("accepting_drops");
}).on("dropout", function() {
    $(this).removeClass("accepting_drops");
});

hoverClass: 'accepting_drops'ドラッグ可能なコンポーネントのデフォルトの動作をオーバーライドしているため、この行を削除しました。親 div の場合、dropoverイベントがトリガーされたときに子要素内にもいるaccepting_drops場合は、そこからクラスを削除します。それ以外の場合は、それを持つ可能性のある子から削除し、代わりに親に追加します。イベントがトリガーされるdropoutと、accepting_dropsクラスを削除します。

子の場合、動作はほぼ標準です。イベントではクラスを他のすべてからdropover削除して子に追加し、イベントでは削除します。accepting_dropsdropout

動作はまだ少し謎ですが、この回避策でうまくいくはずです。

于 2013-02-18T23:49:00.980 に答える