Skip to content

Instantly share code, notes, and snippets.

@fael
Created September 22, 2011 14:29
Show Gist options
  • Save fael/1234907 to your computer and use it in GitHub Desktop.
Save fael/1234907 to your computer and use it in GitHub Desktop.
Drap And Drop Method
//copiei do http://petelepage.com/presentations/2011/gdd-br/webapps/helpers/dnd-lib.js
function habilitarDragAndDrop(id, thumbsId) {
var el_ = document.getElementById(id);
var thumbnails_ = document.getElementById(thumbsId);
this.dragenter = function(e) {
e.stopPropagation();
e.preventDefault();
el_.classList.add('dropHere');
};
this.dragover = function(e) {
e.stopPropagation();
e.preventDefault();
};
this.dragleave = function(e) {
e.stopPropagation();
e.preventDefault();
el_.classList.remove('dropHere');
};
this.drop = function(e) {
e.stopPropagation();
e.preventDefault();
el_.classList.remove('dropHere');
var files = e.dataTransfer.files;
for (var i = 0, file; file = files[i]; i++) {
var imageType = /image.*/;
if (!file.type.match(imageType)) {
continue;
}
var reader = new FileReader();
reader.onerror = function(evt) {
var msg = 'Error ' + evt.target.error.code;
switch (evt.target.error.code) {
case FileError.NOT_READABLE_ERR:
msg += ': NOT_READABLE_ERR';
break;
};
alert(msg);
};
reader.onload = (function(aFile) {
return function(evt) {
if (evt.target.readyState == FileReader.DONE) {
thumbnails_.insertAdjacentHTML(
'afterBegin', '<img src="' + evt.target.result + '" alt="' +
aFile.name + '" title="' + aFile.name + '" />');
}
};
})(file);
reader.readAsDataURL(file);
}
return false;
};
el_.addEventListener("dragenter", this.dragenter, false);
el_.addEventListener("dragover", this.dragover, false);
el_.addEventListener("dragleave", this.dragleave, false);
el_.addEventListener("drop", this.drop, false);
};
habilitarDragAndDrop('drop-area','imagens');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment