2

HTML5 でのドラッグ アンド ドロップに奇妙な問題があります。

テキストを含む div である 3 つのターゲット ゾーンと、画像を含む div である 1 つのソース ゾーンがあります。

dragenter および dragleave イベントを使用して、アクティブなターゲット ゾーンの境界を変更し、ドラッグされたオブジェクトが着地する場所を投影します。

問題は、テキストの上にドラッグするとすぐに、何らかの理由で dragleave イベントが発生し、境界線が削除されることです。

問題を示すjsfiddleの例を次に示します

そして、ここにいくつかのインラインコードがあります:

HTML

<h1>Targets</h1>
<div class="targets">
    <div class="target">I am a target<br/>Touch text while dragging to see the problem</div>
    <div class="target">I am a target<br/>Touch text while dragging to see the problem</div>
    <div class="target">I am a target<br/>Touch text while dragging to see the problem</div>
</div>
<h1>Source</h1>
<div class="source" draggable="true">
    <img class="source_image" src="http://lorempixel.com/output/technics-q-c-184-69-8.jpg" alt="image" width="184" height="69"/>
</div>

JS

$("div.source").on('dragstart', function(e) {
    $(this).fadeTo('slow', 0.4);
});

$("div.source").on('dragend', function(e) {
    $(this).fadeTo('slow', 1);
});

$("div.target").on('dragover', function(e) {
    if (e.preventDefault) {
        e.preventDefault();
    }

    e.dataTransfer.dropEffect = 'move';

    return false;
});

$("div.target").on('dragenter', function(e) {
    $(this).addClass('over');
});

$("div.target").on('dragleave', function(e) {
    $(this).removeClass('over');
});

CSS

h1 {
    font-size: 2em;
    text-align: center;
}

.target {
    margin: 1em;
    display:inline-block;
    width: 184px;
    height: 69px;
    border: 5px #995555 solid;
    border-radius: 5px;
    background-color: #AAAAAA;
    vertical-align: bottom;
    text-align: center;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 0.9em;
}

.target.over {
    border: 5px #0A0 dashed;
}

.source {
    margin: 1em;
    display:inline-block;
    width: 184px;
    height: 69px;
    border: 5px #555599 solid;
    border-radius: 5px;
    background-color: #CCCCCC;
    vertical-align: bottom;
    text-align: center;
    font-size: 1.4em;
    font-weight: bold;      
}

テキストに触れても境界線を変更し続けるための解決策を知っている人はいますか?

別の質問は、ドラッグされているソース div の周りの境界線を維持できるかどうかです。

最後に、ドラッグ アンド ドロップ可能な jQuery UI を使用してこれらの両方を実行できることを認識していますが、ネイティブの HTML5 ドラッグ アンド ドロップでこれを実行できるかどうかは特に疑問に思っています。

4

1 に答える 1

2

問題は、テキストがDOMの追加ノードを構成し、dragleave親dragenter要素だけでなく子要素も考慮に入れることです。カーソルがテキストノードに入ると、。から離れますdiv。これはmouseoutvsのmouseleave問題に似ています。これを回避する簡単な方法は、イベントの数を保持し、すべてが考慮されている場合にのみスタイルを削除することです。

var count=0;
$("div.target").on('dragenter', function(e) {
    $(this).addClass('over');
    count++;
}).on('dragleave', function(e) {
    if (--count<=0) {
        $(this).removeClass('over');
    }
});

これは必ずしも完全に信頼できるわけではありませんがcount（イベントではゼロに設定することを忘れないdropでください）、現在の設定よりもうまく機能します。divもう1つのオプションは、要素にコンテンツをまったく入れず、代わりにCSSで追加することです。

.target:after {
    content: 'I am a target \A Touch text while dragging to see the problem';
    white-space: pre-wrap;
}

生成されたコンテンツは支援技術には見えず、テキストを追加することしかできないため、これにはアクセシビリティの欠点がいくつかありますが、多くの点でよりクリーンなソリューションです。

于 2012-12-28T18:01:23.937 に答える