超不定期で更新する写真達。APIを理解してみます。APIを利用しなくてもmousedown、mousemove、mouseupイベントにロジックを記述ることでDOMのドラッグは可能です。HTML5で追加されたAPIを利用するメリットを考えてみましょう。APIとはHTML5でDataTransferが追加されました。DragはDataTransferのイベントを介して実現しますが、従来の方法と異なってデータの送信側と受信側を同じwindow内に限定しません。その為、デスクトップからテキストをDragしたりDOM(リンク先)をデスクトップにDragする事が可能になります。APIを試すために最初にhtmlとcssの準備を行いましょう。Dragする要素にdraggable=trueを設定してDrag可能な状態にします。id="dropText"></span></div>Dropするエリアを見やすくするためにCSSを追加します。color:#ff1818;}ロジックを記述していきます。Drag側でDragするデータの設定をsetDataメソッドで行います。});});次にDrop側のロジックです。drag可能な要素がdropエリア上にあるとdragoverイベントが発生します。dragoverイベントの処理中にdropイベントを発生させるために意図的にpreventDefault()を呼び出してdropイベントを呼び出します。dropイベント内で設定したデータをgetDataメソッドで受け取ります。preventDefault()を呼び出さない場合はブラウザデフォルトの挙動となりdropイベントが呼ばれません。デスクトップのテキストファイルをドロップするとブラウザデフォルトの挙動でブラウザ内で展開が行われたりします。$('#dropText').html(data);});動作確認してみましょう。APIの応用ローカルのファイルをDropしてみましょう。APIのコードがそのまま利用できます。ローカルにテスト用のテキストファイルを準備して下さい。こんにちは!ローカルのファイルですよ!ロジックを修正してみましょう。dragoverイベントのtypesチェックにFilesを追加します。dropイベント内でファイルのdropかチェックを行い、ファイルの場合は内容を読み取ります。Commentコメントをキャンセルメールアドレスが公開されることはありません。雑談アーカイブ2016年9月2016年5月2016年4月2015年9月2014年6月2014年5月2014年4月2014年3月2014年2月2013年11月2013年9月2013年8月2013年6月2013年5月2013年4月2012年4月2012年3月2012年2月2011年10。