JavaScriptを使用してdataTransferオブジェクトを使用してli要素をドラッグ＆ドロップする

Question

私たちのアプリケーションのドラッグアンドドロップ機能を自動化しています。私がしようとしているのは、dataTransferオブジェクトを使って、javascriptを使ってli要素を 'sourcelist'から 'destlist'にドラッグ＆ドロップすることだけです。ここでは私がやったことがありますし、にはFirefoxでエラーが発生しています。 は、私は、オブジェクトのイベントを初期化する必要があります

<div id=source> 
    <ul id=sourcelist> 
    <li title='foo1'>foo1</li> 
    <li title='foo2'>foo2</li> 
    </ul> 
</div> 
<div id=dest> 
<ul id=destlist> </ul> 
</div> 


event.dataTransfer.setData("text/html","<li title='foo1'>foo1</li>"); 
var textData = event.dataTransfer.getData("text/html"); 
var target=document.getElementById('destlist'); 
target.innerHTML=textData; 

「event.dataTransferが定義されていない」と言って？ドラッグ＆ドロップでプログラムでイベントオブジェクトを作成するにはどうすればよいですか？私はかなりjavascriptに新しいと誰かが正しい方向に私を指すことができれば感謝します。

おかげで、 -Nilesh

Answer 1

ドラッグアンドドロップ機能は、ブラウザだけの新しいバージョンでサポートされています。あなたはChrome 8、Safari 5、Firefox 3.6を試してみましたか？彼らはすべて新しいバージョンであり、そこで動作するはずです。

次のリンクを確認してください。

http://html5demos.com/drag

http://html5doctor.com/native-drag-and-drop/

enter link description here

Answer 2

おそらくdragNdropのchallangeのために他の中で、jQueryのにextentionsを提供していますhttp://jquerypp.com/を見てみましょう。

Answer 3

このスレッドを見つける今後の訪問者のために、一部のブラウザでは特定のイベントに対してのみdataTransferをサポートしています。 Chromeは、1つは、悲しいことに、ドラッグスタートやドラゴンバーではサポートしていません。それがおそらくOPのコードが失敗する理由です。それを見つけた：https://stackoverflow.com/a/7837276/597849