<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
.droptarget {
float: left;
100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<p id="div1" onclick="stopPropagation(event);" ondragstart="dragStart(event)" draggable="true" >
test
</p>
<div onclick="alert(1);" ondrop="dropob(event);" ondragover="allowDrop(event)" class="droptarget">
</div>
<div ondrop="dropob(event);" ondragover="allowDrop(event)" class="droptarget">
</div>
<ul id="fileList">
</ul>
<form>
<fieldset>
<legend>用拖动的方式选择文件：</legend>
<ul id="upload" ondrop="dropFile(event)" ondragenter="return false;" ondragover="return false;" >
</ul>
</fieldset>
</form>
<script type="text/javascript">
//拖动开始保存对象ID
function dragStart() {
try{
event.dataTransfer.setData("Text", event.target.id);
}catch(e){}
}
//阻止默认事件(比如a的话会阻止页面跳转，submit的话会阻止提交..)
function allowDrop(event) {
event.preventDefault();
}
//释放对象
function dropob () {
event.preventDefault();
if (event.target.className == "droptarget") {
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
}
function $(id) {
return document.getElementById(id);
}
function guid() {
function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
}
//添加文件缩略图
function loadFun(file) {
return function (e) {
var str = document.createElement('span');
str.innerHTML = ['<img draggable="true" onclick="stopPropagation(event);" ondragstart="dragStart(event);" src="', e.target.result, '" id="img' + guid()+ '"', ' title="', file.name, '"/>'].join('');
$('upload').appendChild(str);
}
};
//加载文件,
function uploadFile(f) {
if (typeof FileReader == 'undefined') {
alert('浏览器不支持 FileReader对象')
return false;
}
for (var i = 0; i < f.length; i++) {
var reader = new FileReader();
reader.readAsDataURL(f[i]);
reader.onload = loadFun(f[i]);
}
}
//释放拖拽的文件
function dropFile(e) {
uploadFile(e.dataTransfer.files);
e.stopPropagation();
e.preventDefault();
}
//停止冒泡
function stopPropagation()
{
event.stopImmediatePropagation();//立即停止冒泡，当前对象后续未执行的事件也不再执行
// event.stopPropagation();//停止冒泡，不会执行父对象中的事件
}
</script>
</body>
</html>
// event.dataTransfer对象介绍
成员表
| 属性 | 描述 |
|---|---|
| dropEffect | 设置或获取拖曳操作的类型和要显示的光标类型。 |
| effectAllowed | 设置或获取数据传送操作可应用于该对象的源元素。 |
方法
| 方法 | 描述 |
|---|---|
| clearData | 通过 dataTransfer 或 clipboardData 对象从剪贴板删除一种或多种数据格式。 |
| getData | 通过 dataTransfer 或 clipboardData 对象从剪贴板获取指定格式的数据。 |
| setData | 以指定格式给 dataTransfer 或 clipboardData 对象赋予数据。 |
//window.clipboardData对象介绍
成员表
方法
| 方法 | 描述 |
|---|---|
| clearData | 通过 dataTransfer 或 clipboardData 对象从剪贴板删除一种或多种数据格式。 |
| getData | 通过 dataTransfer 或 clipboardData 对象从剪贴板获取指定格式的数据。 |
| setData | 以指定格式给 dataTransfer 或 clipboardData 对象赋予数据。 |