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>

上の「あいうえお」というテキストや、ロゴ画像をドラッグ＆ドロップすると、テキストボックスに状態が表示されます。
画像のイベントは普通に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