Firefox3.5でDrag&Drop
dragstartとdragendの例
あいうえお
<div id="aiueo"
draggable="true"
ondragstart="$('debug').value='aiueo drag start'"
ondragend="$('debug').value='aiueo drag end'"
style="border:solid 1px; width:100px; padding:5px; text-align:center; float:left;">
あいうえお
</div>
draggable="true"
ondragstart="$('debug').value='aiueo drag start'"
ondragend="$('debug').value='aiueo drag end'"
style="border:solid 1px; width:100px; padding:5px; text-align:center; float:left;">
あいうえお
</div>
<img src="/img/logo.jpg" draggable="true"
ondragstart="$('debug').value='image drag start'"
ondragend="$('debug').value='image drag end'">
ondragstart="$('debug').value='image drag start'"
ondragend="$('debug').value='image drag end'">
上の「あいうえお」というテキストや、ロゴ画像をドラッグ&ドロップすると、テキストボックスに状態が表示されます。
画像のイベントは普通にD&D(何の略かは割愛)するだけですが、
あいうえおの方はテキストを選択した状態でD&Dしないと、エンドイベントが取れない。
D&Dできるのは、以下の要素
・Text
・Links
・HTML and XML
・Files
・Images
・Document Nodes
ちなみに同一ドメインであれば、他の窓からのイベントも受け付ける。
試しにこのページをもう1枚開いて、「あいうえお」を選択した状態で、
もう1つのページのテキストボックスの上に要素を持って来ると、「drag enter」と表示される。
(ondragenterイベントを取ってます)
dropイベントを取る例
今日は
良い天気だった
「良い天気だった」を選択して(反転させて)、「今日は」の上にドロップすると、
「今日は 良い天気だった」になります。
dropイベントを受け取ろうとすると、「ondragenter」と「ondragover」が邪魔します。
ので、この2つを「event.preventDefault()」しておきます。
最後に、ondropに行いたい処理を書けばドロップイベントが取れます。
dropイベントの最後でもpreventDefaultをしておかないと、素敵なことになります。
ドラッグしたテキストの内容は、event.dataTransfer.getData('text/plain')で取れます。
<div draggable="true"
ondragenter="event.preventDefault()"
ondragover="event.preventDefault()"
ondrop="this.innerHTML += event.dataTransfer.getData('text/plain'); event.preventDefault();"
style="border:solid 1px; width:100px; padding:5px; text-align:center; float:left; margin-right:30px;">
今日は
</div>
<div draggable="true"
style="border:solid 1px; width:130px; padding:5px; text-align:center; float:left;">
良い天気だった
</div>
ondragenter="event.preventDefault()"
ondragover="event.preventDefault()"
ondrop="this.innerHTML += event.dataTransfer.getData('text/plain'); event.preventDefault();"
style="border:solid 1px; width:100px; padding:5px; text-align:center; float:left; margin-right:30px;">
今日は
</div>
<div draggable="true"
style="border:solid 1px; width:130px; padding:5px; text-align:center; float:left;">
良い天気だった
</div>
その他、詳しい話はこちら
https://developer.mozilla.org/En/DragDrop/Drag_and_Drop