0

私はここに jsfiddle を持っています - http://jsfiddle.net/eswZS/1/ - 重複してドロップ可能な 2 つの兄弟ボックスがあります。redBox を 2 つの上にドロップしたときに、一番上のベージュのボックスにドロップするだけにしたいのですが、私が知っているトリックは機能しません。UI貪欲は親子ボックスに対してのみ機能することを理解しているため、ここではドロップイベントをキャプチャしませんが、 e.stopPropagation() または return false がそれを行う可能性があると思いました:

function beigeDrop(e, ui) {
    console.log("dropping into ", this);
    e.stopPropagation();
    return false;   

}

誰もこれを行う方法を知っていますか?

ありがとう

4

2 に答える 2

1

新しい答え

ドロップ イベントは DOM のボックス要素の順序で発生するため、これに変更します。DOM の最初のものは、2 番目のものの下に表示されます。したがって、最後のドロップ イベントが実際には一番上にあります。

非常に短いタイムアウトを設定すると、すべてのドロップ イベントの後にイベント キューに置かれます。ドロップ イベントごとにタイムアウトが上書きされることは問題ではありません。最後のドロップ イベントは要素を変数に格納し、タイムアウトは、関心のあるドロップを認識する場所です。（「ui」変数も保存するかどうかはわかりません。）

var droppedBox;
function beigeDrop(e, ui) {
    droppedBox = this;

    var timeout = setTimeout(function() {
        if (droppedBox) {
            console.log("dropping into ", droppedBox);
        }
        droppedBox = null;
    }, 1);
}

新しいフィドル

'z-layer' css 値をいじると、ボックスのオーバーラップ方法が変更されますが、DOM 内のボックスの順序は変更されず、ドロップ イベントの順序も変更されないことに注意してください。（そのケースを処理したい場合は、ドロップされたすべての要素のすべての「this」値を保存します。配列を使用します。次に、タイムアウトで配列をソートし、より高いzレイヤーを持つものを見つけて使用できます「ドロップオン」ボックスとして。)

元の回答 - 問題についてはコメントを参照してください

両方のベージュのボックスが、ドロップされた赤いボックスを受け入れることを伝えています。これにより、一方のボックスはそれを受け入れますが、もう一方のボックスは受け入れません。

$('#box1').droppable({drop:beigeDrop, accept:'#redbox'});
$('#box2').droppable({drop:beigeDrop, accept:'#none'});

最初のモディファイド フィドル

于 2013-08-05T23:18:47.227 に答える
0

コンテナエリアに多数のドロップ可能なものがある場合はどうなりますか????

あなたはその問題を考え直さなければなりません。貪欲は、兄弟関係ではなく、親子関係でのみ機能します。そのため、ドロップ可能な js を編集するか、独自のロジックを配置する必要があります。

したがって、多数のドロップ可能オブジェクトがある場合は、この例のように完全なドロップ可能オブジェクトのドロップを処理する追加のコードを記述する必要があります。

完璧な兄弟をドロップ可能にするには、以下のようにドロップベールを変更します

        var topElement = undefined;
        var topElementArray = Array();

        $( "#draggable" ).draggable();
        $( ".droppableBox" ).droppable({
            activeClass: "active-droppable",
            tolerance:'pointer',
            over: function( event, ui ) { 
                // This is for only show a message that z-index must be required for proppable
                // you can remove it after testing or after development
                if ($(this).css("z-index") == 'auto') {
                    alert("Please provide z-index for every droppable.");
                    return;
                }
                //

                topElement = undefined;
                topElementArray = Array();
                // Change it as you want to write in your code
                // For Container id or for your specific class for droppable or for both
                $('#demo > .droppableBox').each(function(){                     
                    _left = $(this).offset().left, _right = $(this).offset().left + $(this).width();
                    _top = $(this).offset().top, _bottom = $(this).offset().top + $(this).height();
                    if (event.pageX >= _left && event.pageX <= _right && event.pageY >= _top && event.pageY <= _bottom) {   
                          topElementArray.push($(this).attr('id'));
                    }
                });
            },
            drop: function( event, ui ) {
                if (!topElement) {
                    topElement = determineTopElement(topElementArray);
                }                   
                if ($(this).attr('id') == $(topElement).attr('id')) {
                    $( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
                  // Your code after successful dropped element on specific siblings
                  // Start writing code for dropped element & perfect droppable
                }

            }
        });

        determineTopElement = function(_array) {
            var topElement;
            var zIndexHighest = 0;
            for (i = 0; i < _array.length; i++){
               var element = $("#"+ _array[i]);
               var z_index = $(element).css("z-index");
               if( z_index > zIndexHighest){
                   zIndexHighest = z_index;
                   topElement = element;
               }
            }
            return topElement;       
        }
于 2013-11-25T11:55:37.400 に答える