7

HTML5のドラッグアンドドロップに少し問題があります。簡単な方法はありません。基本的に、内部に他の HTML 要素を含む「ボックス」がいくつかあります。親ボックスはドラッグ可能で、互いにドロップできます。

本文にイベントをバインドdragoverして、ページ全体でドラッグ アンド ドロップを処理します。問題は、ボックスをドラッグすると、子要素でイベントがトリガーされることがあり、親がこのイベントをまったく取得しないことです。

これを防ぐ簡単な方法はありますか？

基本的に、マウスがターゲットボックスの領域に入るとすぐにドラッグオーバーイベントが発生するようにします。これを解決するいくつかの方法を知っていますが、それらは本当に醜いので、何か簡単なものがあるのではないかと思っていました。

ご感想ありがとうございます

私がコードで行っていることの短いバージョン:

document.addEventListener('dragenter', function(e) {

    if (e.target.className == 'candrophere')
        // cancel out "e" to allow drop


}, false);

しかし、私の場合、子要素が「.candrophere」ボックスのほぼ全体を占めているため、正しいターゲットでイベントが発生することはほとんどありません(特にマウスをより速く動かした場合)

4

2 に答える 2

16

csspointer-eventsルールは、適用されている要素でマウスインタラクションイベントが発生するのを防ぎますが、現在IEではサポートされていません（http://caniuse.com/pointer-events）。

この問題に使用した回避策は、次のようなものを追加することです。

.is-drag-in-progress .child-elements
{
    pointer-events:none;
}

CSSに追加し、ハンドラーの要素にis-drag-in-progressクラスを追加します（ドラッグが終了したら削除します）。これにより、子要素が親要素のドラッグイベントに干渉するのを防ぎます。bodyonDragStart

于 2013-03-05T05:31:12.950 に答える
1

基本的に私の解決策は次のとおりです。

ほとんどの場合、e.target と e.currentTarget は親ボックスに一致させることができないため、e.target が親ボックスの子であるかどうかを手動で確認するだけです。それを行うには多くの方法がありますが、私はカスタム関数を使用しています。私自身のフレームワークに基づいており、とにかくそれなしでは機能しないため、ここに投稿することはできませんが、疑似コードは次のとおりです。

// target is a framework object (much like jquery)
closestDroppableParent = function(target)
{
    // i know that all children in those boxes will not be any deeper than this
    var max_levels = 5;

    while (target && max_levels > 0)
    {
        max_levels--;

        // droppable boxes have data-droptype attribute set so only other boxes with the same attribute
        // can be dropped on them. This check can be done any way you like. You can have a custom class
        // for droppable objects, check for draggable attribute etc...
        // .data() is a framework function that returns the value of the data-* attributes
        if (target.data('droptype'))
            return target;

        // .parent() is a framework function to get parent node
        target = target.parent();
    }

    return null;
}


// drag over event
dragOverEventHandler = function(e)
{
    // convert the element to its closest droppable parent
            // $() is much like jquery
    var closest = closestDroppableParent($(e.target));

    if (closest)
        closest.addClass('draggedOver');
}
于 2012-09-20T10:00:54.203 に答える