[練習]JSマウスドラッグ(DnD)操作
1690 ワード
ドラッグアンドドロップ(Drag and Drop,DnD)操作は、下位OSとの結合にかかわるため、複雑なインタラクション操作である.ここでは、主にHTML 5のFileAPIで使用される簡単な画像をブラウザに表示する操作を実現します.
先にDEMODnD demoをアップ
注意が必要なのは、ブラウザが該当するドラッグイベントをキャンセルすることによってそのイベントに興味を示していること、例えばキャンセル
HTML
JS
先にDEMODnD demoをアップ
注意が必要なのは、ブラウザが該当するドラッグイベントをキャンセルすることによってそのイベントに興味を示していること、例えばキャンセル
dragover
ブラウザがさらなるドラッグを受け入れる準備ができていることを示していること、続いてdragend
最後にdrop
、drop
事件が発生した場合、HTML 5の新しいファイルAPI、つまりFileAPI
データインタラクションを行うことができますが、具体的には本栗コードを参照してください.コード:HTML
File API
CSS
#holder { border: 10px dashed #ccc; width: 300px; height: 300px; margin: 20px auto;}
#holder.hover { border: 10px dashed #333; }
p {text-align:center;}
JS
var holder = document.getElementById('holder'),
state = document.getElementById('status');
if (typeof window.FileReader === 'undefined') {
state.className = 'fail';
} else {
state.className = 'success';
state.innerHTML = 'File API ';
}
holder.ondragover = function () {
this.className = 'hover';
console.log('dragover'); return false;
};
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
//console.log(e)
this.className = '';
e.preventDefault();
var file = e.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function (event) {
console.log(event.target);
holder.style.background = 'url(' + event.target.result + ') no-repeat center';
};
console.log(file);
reader.readAsDataURL(file);
return false;
};