cod*_*nja 10 html html5 drag-and-drop
我正在尝试获得与dropbox拖放相似的功能.我希望尽可能使用基本的Web组件/编码来实现这一点.HTML或HTML5是最好的.这对原型来说越快越好.这是我想要实现的目标:
1)用户应该能够将文件从他们的计算机拖放到网页上的任何位置.2)当一个项目被拖过它时,网页本身应该显示一些指示符(即:突出显示或颜色叠加).
我已经看到了几个示例的代码片段,但它们都限制将已经在屏幕上的容器丢弃到其他人而不是将文件放入网页.
删除的文件不需要上传到任何地方,因为这将是一个演示.
任何人都有一些代码片段可以让我继续前进.
kir*_*gin 13
基本的想法是这样的:
html将在页面上拖动某些内容时显示区域的元素.以下代码对我有用:https://jsfiddle.net/oL2akhtz/.
这部分HTML5规范有点奇怪.要记住的最重要的事情是这些:
dragenter当我们拖动某些东西并输入元素的边界时会发生火灾; dragover当我们在元素上拖动某些内容时,每隔几毫秒触发一次; dragleave与...相反dragenter; drop什么东西实际上掉落了.dragenter和dragover这是一个有效的放置目标的任何元素.也就是说,通过侦听这些事件并取消其默认操作,该元素将变为有效的放置目标.在我们的例子中,这适用于下拉区域覆盖.现在我将尝试解释我的代码.
dragenter整个页面的监听器.它只显示叠加层(并且不需要阻止默认操作,因为我们实际上不打算删除页面上的任何内容,我们将仅在叠加层上删除).dragenter和dragover用于叠加.它们阻止了默认操作(禁止在那里丢弃),并且还设置dropEffect为用户提供一些很好的反馈(尽管现在在现代浏览器中似乎什么都不做).这是测试被拖动项目是否有效的好地方.div覆盖了所有内容),我们将其隐藏起来.就是这样,非常简单.以下是有人删除文件时发生的情况:
dragenter对于html元素火灾.它显示了dropzone.dragleave因此html元素会触发,但我们会忽略它.dragenter对于dropzone火灾,然后dragover继续射击.我们只是吉普车说,是的,这是一个有效的下降目标.drop点火,要么我们隐藏掉区并处理文件,或者dragleave对于dropzone fires,在这种情况下我们只是隐藏它.cod*_*nja -1
这是最终的工作结果
首先是 HTML 代码：
<body id="drop1" align=center>
<DIV id="content" >Drop files here
<h1 align=center>A File Preview Demo</h1>
<DIV id="status">Drag the files from a folder to a selected area ...</DIV>
<DIV id="drop2">Drop files here.</DIV>
<DIV id="list"></DIV>
<DIV id="list2"></DIV>
</DIV>
</body>
接下来是CSS代码：
html,body{
height: 96%;
}
#drop1 {
height: 100%;
width: 97%;
border: 2px solid blue;
margin: 0px;
padding: 10px;
background-color: yellow;
overflow:hidden;
}
#drop2 {
height: 30%;
width: 30%;
border: 1px solid red;
margin: 10px;
padding: 10px;
}
#content
{
height: 100%;
width: 100%;
}
.hoverClass {
background-color: blue;
}
.dropClass {
background-color: green;
}
最后的JS代码：
if (window.FileReader) {
var drop;
var drop2;
var fileNumber = 0;
addEventHandler(window, 'load', function () {
var status = document.getElementById('status');
drop = document.getElementById('drop1');
drop2 = document.getElementById('drop2');
var list = document.getElementById('list');
var list2 = document.getElementById('list2');
function cancel(e) {
if (e.preventDefault) {
e.preventDefault();
}
return false;
}
// Tells the browser that we *can* drop on this target
addEventHandler(drop, 'dragover', function (e) {
e = e || window.event; // get window.event if e argument missing (in IE)
if (e.preventDefault) {
e.preventDefault();
}
fileNumber = fileNumber + 1;
status.innerHTML = fileNumber;
$("#drop1").css("background-color", '#AA0000');
return false;
});
// Tells the browser that we *can* drop on this target
addEventHandler(drop, 'dragleave', function (e) {
e = e || window.event; // get window.event if e argument missing (in IE)
if (e.preventDefault) {
e.preventDefault();
}
fileNumber = fileNumber + 1;
status.innerHTML = fileNumber;
$("#drop1").css("background-color", '#FF0000');
return false;
});
addEventHandler(drop, 'dragenter', cancel);
addEventHandler(drop2, 'dragover', cancel);
addEventHandler(drop2, 'dragenter', cancel);
addEventHandler(drop, 'drop', function (e) {
e = e || window.event; // get window.event if e argument missing (in IE)
if (e.preventDefault) {
e.preventDefault();
} // stops the browser from redirecting off to the image.
var dt = e.dataTransfer;
var files = dt.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var reader = new FileReader();
//attach event handlers here...
reader.readAsDataURL(file);
addEventHandler(reader, 'loadend', function (e, file) {
var bin = this.result;
var newFile = document.createElement('div');
newFile.innerHTML = 'Loaded : ' + file.name + ' size ' + file.size + ' B';
list.appendChild(newFile);
var fileNumber = list.getElementsByTagName('div').length;
status.innerHTML = fileNumber < files.length ? 'Loaded 100% of file ' + fileNumber + ' of ' + files.length + '...' : 'Done loading. processed ' + fileNumber + ' files.';
var img = document.createElement("img");
img.file = file;
img.src = bin;
list.appendChild(img);
}.bindToEventHandler(file));
}
return false;
});
addEventHandler(drop2, 'drop', function (e) {
e = e || window.event; // get window.event if e argument missing (in IE)
if (e.preventDefault) {
e.preventDefault();
} // stops the browser from redirecting off to the image.
var dt = e.dataTransfer;
var files = dt.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var reader = new FileReader();
//attach event handlers here...
reader.readAsDataURL(file);
addEventHandler(reader, 'loadend', function (e, file) {
var bin = this.result;
var newFile = document.createElement('div');
newFile.innerHTML = 'Loaded : ' + file.name + ' size ' + file.size + ' B';
list.appendChild(newFile);
var fileNumber = list.getElementsByTagName('div').length;
status.innerHTML = fileNumber < files.length ? 'Loaded2 100% of file ' + fileNumber + ' of ' + files.length + '...' : 'Done loading. processed ' + fileNumber + ' files.';
var img = document.createElement("img");
img.file = file;
img.src = bin;
list.appendChild(img);
}.bindToEventHandler(file));
}
return true;
});
Function.prototype.bindToEventHandler = function bindToEventHandler() {
var handler = this;
var boundParameters = Array.prototype.slice.call(arguments);
//create closure
return function (e) {
e = e || window.event; // get window.event if e argument missing (in IE)
boundParameters.unshift(e);
handler.apply(this, boundParameters);
}
};
});
} else {
document.getElementById('status').innerHTML = 'Your browser does not support the HTML5 FileReader.';
}
function addFile(evt) {
e = e || window.event; // get window.event if e argument missing (in IE)
if (e.preventDefault) {
e.preventDefault();
} // stops the browser from redirecting off to the image.
var dt = e.dataTransfer;
var files = dt.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var reader = new FileReader();
//attach event handlers here...
reader.readAsDataURL(file);
addEventHandler(reader, 'loadend', function (e, file) {
var bin = this.result;
var newFile = document.createElement('div');
newFile.innerHTML = 'Loaded : ' + file.name + ' size ' + file.size + ' B';
list.appendChild(newFile);
var fileNumber = list.getElementsByTagName('div').length;
status.innerHTML = fileNumber < files.length ? 'Loaded2 100% of file ' + fileNumber + ' of ' + files.length + '...' : 'Done loading. processed ' + fileNumber + ' files.';
var img = document.createElement("img");
img.file = file;
img.src = bin;
list.appendChild(img);
}.bindToEventHandler(file));
}
return false;
}
//seperate event
function addEventHandler(obj, evt, handler) {
if (obj.addEventListener) {
// W3C method
obj.addEventListener(evt, handler, false);
} else if (obj.attachEvent) {
// IE method.
obj.attachEvent('on' + evt, handler);
} else {
// Old school method.
obj['on' + evt] = handler;
}
}
快乐编码！
| 归档时间： |
|
| 查看次数： |
8351 次 |
| 最近记录： |