デスクトップアプリライクな操作性を実現するドラッグ&ドロップAPI
![](https://thinkit.co.jp/sites/default/files/styles/main_image_730x/public/main_images/3986_main_7.png?itok=olWQlh-a)
TIPS 064:ドラッグ&ドロップで許可される動作を指定する
effectAllowed/dropEffectプロパティを指定することで、ドラッグ&ドロップ時に想定される動作を明示的に指定できます。これらのプロパティを指定しておくことで、ドラッグ&ドロップ時の動作を制限できるだけでなく、動作に応じてマウスポインタが変化し、視覚的にも現在の操作内容が明確になります。
[リスト06]ドラッグ&ドロップで許可される操作を指定(effect.html)
<script>
window.addEventListener('DOMContentLoaded', function() {
// ドラッグ/ドロップ対象の要素を取得
var drag = document.querySelector('#drag');
var drop = document.querySelector('#drop');
// ドラッグ開始時の処理を定義
drag.addEventListener('dragstart', function(e) {
// 現在の要素にコピーを許可
e.dataTransfer.effectAllowed = 'copy';
e.dataTransfer.setData('text', e.target.id);
}, true);
// ドラッグ中の処理を定義
drop.addEventListener('dragover', function(e) {
e.preventDefault();
// ドロップ領域でコピーを許可
e.dataTransfer.dropEffect = 'copy';
}, true);
// ドロップ時の処理を定義
drop.addEventListener('drop', function(e) {
var id = e.dataTransfer.getData('text');
e.currentTarget.appendChild(document.getElementById(id));
e.preventDefault();
}, true);
});
</script>
まず、effectAllowedプロパティは、ドラッグ元要素で許可される動作を指定します。dragstartイベントリスナーで指定します(1)。以下に、指定できる主な値をまとめておきます。
表5:effectAllowedプロパティの設定値
設定値
概要
none
すべてのドロップ操作を禁止
copy
データをコピー
link
データをリンク
move
データを移動
copyLink
データをコピー、またはリンク
copyMove
データをコピー、または移動
linkMove
データをリンク、または移動
all
すべての操作を許可
そして、effectAllowedプロパティとセットで指定するのがdropEffectedプロパティです(2)。こちらはドロップ先の要素で許可する動作を指定します。以下は、主な設定値です。
表6:dropEeffectプロパティの設定値
設定値
概要
none
すべてのドロップ操作を禁止
copy
データをコピー
link
データをリンク
move
データを移動
dropEffectプロパティには、effectAllowedプロパティで指定した動作に対応する値を指定します。effectAllowed/dropEffectプロパティの値に応じて、マウスポインタも適した形状に変化する点に注目してください。
なお、dropEffectプロパティの値が、effectAllowedプロパティで許可した動作のいずれにも合致しない場合、マウスアイコンもドロップ禁止を表すものとなり、ドロップ操作はキャンセルされます。
TIPS 065:ドラッグアイコンをカスタマイズする
setDragImageメソッドを利用することで、ドラッグ時のアイコン画像を差し替えることもできます。アプリの動作によっては、独自のアイコンによって、より操作の結果を直感的に知らせることができるでしょう。
[リスト07]ドラッグ時のアイコンをカスタマイズするコード(icon.html)
<script>
window.addEventListener('DOMContentLoaded', function() {
// ドラッグ/ドロップ対象の要素を取得
var drag = document.querySelector('#drag');
var drop = document.querySelector('#drop');
// ドラッグ開始時の処理を定義
drag.addEventListener('dragstart', function(e) {
// アイコン画像を準備&ドラッグアイコンとして設定
var icon = document.createElement('img');
icon.src = 'icon.jpg';
e.dataTransfer.setDragImage(icon, 0, 0);
e.dataTransfer.setData('text', e.target.id);
}, true);
...中略...
});
</script>
setDragImageメソッドの引数には「ドラッグアイコン」「X座標」「Y座標」の順で指定します。ドラッグアイコンは、あらかじめImageオブジェクトとして用意しておきます。
X/Y座標は、アイコン画像をマウスポインタの位置からずらしたい場合に利用します。デフォルトでは、マウスポインタ位置にアイコン画像を表示します。
TIPS 064:ドラッグ&ドロップで許可される動作を指定する
effectAllowed/dropEffectプロパティを指定することで、ドラッグ&ドロップ時に想定される動作を明示的に指定できます。これらのプロパティを指定しておくことで、ドラッグ&ドロップ時の動作を制限できるだけでなく、動作に応じてマウスポインタが変化し、視覚的にも現在の操作内容が明確になります。
[リスト06]ドラッグ&ドロップで許可される操作を指定(effect.html)
<script> window.addEventListener('DOMContentLoaded', function() { // ドラッグ/ドロップ対象の要素を取得 var drag = document.querySelector('#drag'); var drop = document.querySelector('#drop'); // ドラッグ開始時の処理を定義 drag.addEventListener('dragstart', function(e) { // 現在の要素にコピーを許可 e.dataTransfer.effectAllowed = 'copy'; e.dataTransfer.setData('text', e.target.id); }, true); // ドラッグ中の処理を定義 drop.addEventListener('dragover', function(e) { e.preventDefault(); // ドロップ領域でコピーを許可 e.dataTransfer.dropEffect = 'copy'; }, true); // ドロップ時の処理を定義 drop.addEventListener('drop', function(e) { var id = e.dataTransfer.getData('text'); e.currentTarget.appendChild(document.getElementById(id)); e.preventDefault(); }, true); }); </script>
まず、effectAllowedプロパティは、ドラッグ元要素で許可される動作を指定します。dragstartイベントリスナーで指定します(1)。以下に、指定できる主な値をまとめておきます。
表5:effectAllowedプロパティの設定値
設定値 | 概要 |
---|---|
none | すべてのドロップ操作を禁止 |
copy | データをコピー |
link | データをリンク |
move | データを移動 |
copyLink | データをコピー、またはリンク |
copyMove | データをコピー、または移動 |
linkMove | データをリンク、または移動 |
all | すべての操作を許可 |
そして、effectAllowedプロパティとセットで指定するのがdropEffectedプロパティです(2)。こちらはドロップ先の要素で許可する動作を指定します。以下は、主な設定値です。
表6:dropEeffectプロパティの設定値
設定値 | 概要 |
---|---|
none | すべてのドロップ操作を禁止 |
copy | データをコピー |
link | データをリンク |
move | データを移動 |
dropEffectプロパティには、effectAllowedプロパティで指定した動作に対応する値を指定します。effectAllowed/dropEffectプロパティの値に応じて、マウスポインタも適した形状に変化する点に注目してください。
なお、dropEffectプロパティの値が、effectAllowedプロパティで許可した動作のいずれにも合致しない場合、マウスアイコンもドロップ禁止を表すものとなり、ドロップ操作はキャンセルされます。
TIPS 065:ドラッグアイコンをカスタマイズする
setDragImageメソッドを利用することで、ドラッグ時のアイコン画像を差し替えることもできます。アプリの動作によっては、独自のアイコンによって、より操作の結果を直感的に知らせることができるでしょう。
[リスト07]ドラッグ時のアイコンをカスタマイズするコード(icon.html)
<script> window.addEventListener('DOMContentLoaded', function() { // ドラッグ/ドロップ対象の要素を取得 var drag = document.querySelector('#drag'); var drop = document.querySelector('#drop'); // ドラッグ開始時の処理を定義 drag.addEventListener('dragstart', function(e) { // アイコン画像を準備&ドラッグアイコンとして設定 var icon = document.createElement('img'); icon.src = 'icon.jpg'; e.dataTransfer.setDragImage(icon, 0, 0); e.dataTransfer.setData('text', e.target.id); }, true); ...中略... }); </script>
setDragImageメソッドの引数には「ドラッグアイコン」「X座標」「Y座標」の順で指定します。ドラッグアイコンは、あらかじめImageオブジェクトとして用意しておきます。
X/Y座標は、アイコン画像をマウスポインタの位置からずらしたい場合に利用します。デフォルトでは、マウスポインタ位置にアイコン画像を表示します。
デスクトップアプリライクな操作性を実現するドラッグ&ドロップAPI
連載バックナンバー
Think ITメルマガ会員登録受付中
全文検索エンジンによるおすすめ記事
- HTML5のドラッグ&ドロップAPI、File API、Web Storage
- JavaScriptでローカルファイルを自在に操る- File API
- プラグインは要らない!音声/動画対応したHTML5- / 要素
- スマホアプリ開発にも便利な位置情報API- Geolocation API-
- クッキーより便利になったブラウザ標準ストレージ- Web Storage
- HTML+JavaScriptだけでブラウザに図形描画- Canvas API-
- サンプルのプログラムコード解説
- HTML+JavaScriptだけでブラウザに図形描画(3)- Canvas API-
- HTML+JavaScriptだけでブラウザに図形描画(2)- Canvas API-
- 「TAURI」で「丸アートお絵描き」アプリを作ろう