ドラッグ＆ドロップできるようにするには
解説
要素をドラッグ可能にするにはdraggable属性をtrueにします。選択中の文字列、（src属性を指定された）画像、（href属性を指定された）リンクは既定でドラッグ可能です。
IEはdraggable属性をまだサポートしていないため、既定でドラッグ可能なものしかドラッグできません。
draggable属性の指定例を以下に示します。
<img draggable="true" src="example.jpg">
要素をドロップ先として利用可能にするにはdropzone属性を設定しますが、実装が進んでいないため、ブラウザの既定の動作を変更することで、ドロップを受け付け可能にします。
HTMLの各要素のイベントでは、イベントハンドラで明示的に抑制しない限り、ブラウザ側で定義した既定の処理が呼び出されます。ローカルのHTMLファイルをドキュメントにドラッグ＆ドロップするとそのページに遷移したり、リンクの上にカーソルを移動するとリンクの色が変化したりするのは、この既定のイベント処理の結果です。
ドロップが既定で無効なのは、この既定のイベント処理の中で、ドロップ受け付けがその都度、無効化されているからです。そのため、ドロップ直前のタイミング（ondragoverイベントハンドラ）で、ドロップを無効にする既定のイベント処理を抑制して、要素へのドロップを有効にします。
また、ドロップを有効にした後に、dropイベントの既定のイベント処理が実行されると、たとえばローカルファイルのドロップによるページ遷移など、予期しない動作が起きる場合があるので、既定のイベント処理は無効にしておく必要があります。既定のイベント処理が実行されないようにするには、イベントハンドラ内で、「event.preventDefault()」メソッドを呼び出します。
必ず、以下のように、ondragoverとondropの両方のイベントハンドラで「event.preventDefault()」を呼び出す必要があることに注意してください。
//targetはドロップ先の要素
target.ondragover = function(event){
// ドロップ直前のイベントで既定の処理をキャンセルしてドロップを可能にする
event.preventDefault();
}
target.ondrop = function(event){
// ドロップ時の処理をここに記述
// ドロップ後の既定の処理をキャンセル
event.preventDefault();
}
Windows版Safariでは、上記を行っただけではドロップできません。ドラッグ中に、ドロップしたい要素の上でシフトキーもしくはコントロールキーを押してドラッグ＆ドロップの動作モードを変更することで、ドロップ可能になります。動作モードに関しては「ドラッグ＆ドロップの効果を指定に応じて変更するには」を参照してください。
IEではセキュリティの設定によって既定の動作を変更できないか、ダイアログによって許可を求められる場合があります。
関連項目
