0

私が遭遇したこの Fiddle で最もよく説明されている問題があります。

http://jsfiddle.net/JSFU4/3/

これは、オブジェクトをドラッグして、そのドロップ可能な対応物にカーソルを合わせると、それらの間に div がある場合でもドロップが検出されます。これは避けたい。

私がドキュメントを読んで理解したことから、それを行うためのすぐに使える解決策はありませんが、ドラッグされた要素がドロップされた「実際の」最上部の div を取得し、次の場合にアクションを回避することがオプションになる可能性がありますオーバーフローしたdivです。（ただし、これは単なるアイデアです）。

つまり、droppable-divと呼ばれるドロップ可能な divがあり、その上にon-top-non-droppable-divと呼ばれる div があるとします...ドロップされた関数でこれを検出できますか?

dropped: function(ev, ui){
    // somehow detect if the first target to receive the draggable event
    // is #on-top-non-droppable-div, and don't do anything if it is.
}
4

1 に答える 1

4

多分それはあなたのニーズに合っています：

$(function () {
    $('.drag').draggable();
    $('.drop, .overlay').droppable({
        tolerance: 'touch',
        hoverClass: 'drop-hover',
        accept: '.drag',
        drop: function (event, ui) {
            if ($(this).hasClass('overlay')) {
                ui.draggable.draggable({
                    revert: true
                });
            } else {
                ui.draggable.draggable({
                    revert: "invalid"
                });
            }
        }
    });
});

デモ

設定例はこちらtolerance: 'pointer',

デモ

于 2013-09-27T09:10:00.627 に答える