Pot.js と PotLite.js で利用可能。
ドラッグ&ドロップ イベントをクリアします。
Pot.DropFile により設定された、ドラッグ&ドロップ イベントを解除します。
値を返しません。
// この例では DOM 要素の操作に jQuery を使用しています
// この例の実行後にブラウザにファイルをドロップすることができます
// ドロップ用のパネルを生成
var panel = $('<div/>')
.css({
position : 'fixed',
left : '10%',
top : '10%',
width : '80%',
height : '80%',
minHeight : 200,
background : '#ccc',
border : '2px solid #999',
zIndex : 9999999
})
.hide()
.text('Drop here')
.appendTo('body');
// 設定と共に Pot.DropFile インスタンスを生成
var dropFile = new Pot.DropFile(panel, {
// ドロップ可能な時 (パネルを表示)
onShow : function() { panel.show() },
// ドロップ不可の時 (パネルを非表示)
onHide : function() { panel.hide() },
// ファイルがドロップされた時
onDrop : function(files) {
panel.text('dropped');
},
// 画像がドロップされた時
onLoadImage : function(data, name, size, type) {
$('<img/>').attr('src', data).appendTo('body');
},
// テキストがドロップされた時
onLoadText : function(data, name, size, type) {
$('<textarea/>').val(data).appendTo('body');
},
// それ以外のファイルがドロップされた時
onLoadUnknown : function(data, name, size) {
$('<textarea/>').val(data).appendTo('body');
},
// ファイルがドロップされてロード完了した時
onLoadEnd : function(files) {
// このタイミングでアップロードが可能
this.upload(
'http://www.example.com/uplaod',
'dropfiles'
).then(function() {
alert('アップロード完了');
});
}
});
// ドロップイベントをクリアする場合
$('#clear-drop-events').click(function() {
dropFile.clearDropEvents();
});