0

私はこのようなドラッグ アンド ドロップ システムを構築しました: 編集可能な Div にドロップできるリストを次に示します: リスト コードは次のようになります。

<li class='file'>test<li>
$("li.file").bind("dragstart",function(e){
e.originalEvent.dataTransfer.effectAllow='move';
e.originalEvent.dataTransfer.setData('text',$(this).text());
});`

次に、ドラッグ項目を取得するための Div を取得しました。

<div id='editor'><div>
$("#editor").bind('dragover',function(e){
e.originalEvent.dataTransfer.dropEffect="move";
if(e.preventDefault){
e.preventDefault();
});
$("#editor").bind('drop',function(e){
    if (e.target==$('#editor')[0]){
#add a sub <div class="editorcontent"> under the <div id='editor'>
}

これらのコードは正常に動作します。次に、「div.editorcontent」に新しいドラッグ アンド ドロップ イベントを追加して、2 つの異なる editorcontent div の位置を切り替えられるようにします。

$("div.editorcontent").bind("dragstart",function(e){
e.originalEvent.dataTransfer.effectAllow='move';
});
$("div.editorcontent").bind("dragover",function(e){
e.originalEvent.dataTransfer.dropEffect="move";
if(e.preventDefault){
e.preventDefault();
}

});
$("div.editorcontent").bind("drop",function(e){
    alert(e.target);
});

しかし、それらのコードは機能しません。Chrome にブレークポイントを設定しましたが、#editor のドラッグ アンド ドロップ イベントのみが使用されているようです。div.editorcontent をドラッグするたびに、イベントは発生しません。div.editorcontent 要素を他の div.editorcontent にドロップすると。クロムは #editor のドロップ イベントに入ります。どうすれば問題を解決できますか?

4

1 に答える 1

0

問題は、$.ready のときに新しい追加 div が存在しないため、それらの div への新しいハンドラーがそれらの div にバインドされないことです。

于 2013-03-25T01:53:56.610 に答える