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>


      <img src="/img/logo.jpg" draggable="true"
          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>


その他、詳しい話はこちら
https://developer.mozilla.org/En/DragDrop/Drag_and_Drop