Chrome拡張でのドラッグ・アンド・ドロップ
ドラッグ・
ドラッグ・
<!DOCTYPE html>
<html>
<head>
<title>drag&drop sample</title>
<meta charset="utf-8">
</head>
<body>
<img id="icon" src="icon.png" draggable="true">
<div id="drop"></div>
<script src="drag.js"></script>
</body>
</html>
HTMLはあまり特徴がありません。一点だけ，
draggable属性でドラッグはできるようになっているので，
ドラッグアンドドロップのサンプルJavaScript
var icon = document.getElementById('icon');
var drop = document.getElementById('drop');
drop.addEventListener('dragenter', function(evt){
evt.preventDefault();
}, false);
drop.addEventListener('dragover', function(evt){
evt.preventDefault();
}, false);
drop.addEventListener('drop', function(evt){
drop.appendChild(icon.cloneNode(false));
evt.preventDefault();
}, false);
ドロップ対象の要素に対して，
なお，
上記の例ではドロップ後の画像もさらにドラッグ・
ドロップ時に再度ドラッグできないようにする
drop.addEventListener('drop', function(evt){
var new_icon = icon.cloneNode(false);
new_icon.draggable = false;
drop.appendChild(new_icon);
evt.preventDefault();
}, false);
上記の方法はFirefoxでは正常に動作します。本来ならChromeでも動作するはずなのですが，
ドラッグ可能な要素を限定する実装例
var icon = document.getElementById('icon');
var drop = document.getElementById('drop');
icon.addEventListener('dragstart', function(evt){
evt.stopPropagation();
evt.dataTransfer.setData('Text', 'original');
}, false);
drop.addEventListener('dragenter', function(evt){
if (evt.dataTransfer.getData('Text') === 'original') {
evt.preventDefault();
}
}, false);
drop.addEventListener('dragover', function(evt){
if (evt.dataTransfer.getData('Text') === 'original') {
evt.preventDefault();
}
}, false);
drop.addEventListener('drop', function(evt){
drop.appendChild(icon.cloneNode(false));
evt.preventDefault();
}, false);
dragstartイベントで指定の画像のドラッグを開始したタイミングを捉え，
なお，
拡張への応用
第5回で作成したStart Tileにドラッグ・
図1 ドロップによるタブ操作
3つのブロックの真ん中がブックマークシートになっており，
基本的な処理はシンプルで，
ドラッグ開始時にURLをセット
bookmark_list.addEventListener("dragstart", function(evt){
evt.stopPropagation();
evt.dataTransfer.setData("URL", evt.target.querySelector('a').href);
}, false);
ドラッグの最中は現在どこにドロップしようとしているのか，
ドロップ時の処理
tabs_area.addEventListener("drop", function(evt){
var href = evt.dataTransfer.getData("URL");
chrome.tabs.create({url:href, selected:false});
}, false);
ドロップが成功した場合，
Start Tileのソースはbitbucket.
まとめ
今回はChrome拡張で使えるHTML5としてcanvasとドラッグ・
