draggable是一个枚举属性，用于指定一个标签是否可以被拖拽。有以下四种取值：
| true | 表示此元素可拖拽 |
| false | 表示此元素不可拖拽 |
| auto | 除img和带href的标签a标签表示可拖拽外，其它标签均表示不可拖拽 |
| 其它任何值 | 表示不可拖拽 |
事件：
【被拖拽元素】
| ondragstart | 拖拽前触发（鼠标按下并开始拖拽） |
| ondrag | 拖拽过程中触发（连续出发，即使鼠标不移动也会连续触发） |
| ondragend | 拖拽结束触发 |
【目标元素】
| ondragenter | 进入目标元素 |
| ondragover | |
| ondrop | 释放鼠标瞬间触发 |
| ondragleave | 鼠标离开目标元素触发 |
整个拖拽过程事件顺序：
ondragstart — ondrag — ondragenter — ondragover — ondragleave/ondrop — ondragend
注：1. 若想触发ondrop事件，ondragover 中需要阻止默认事件（元素默认是不允许放置的）。
2. 在Firefox 3.5+中，如果是把图像拖放到放置目标上，页面就会转向图像文件；而如果是把文本拖放到放置目标上，则会导致无效URL错误，因此，为了让Firefox支持正常的拖放，还要取消drop事件的默认行为，阻止它打开URL。
关于event.dataTransfer
| setData(key,value) | 两个参数都是字符串类型 |
| getData(key) | getData()可以取得由setData()保存的值 |
| effectAllowed |
设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized) ； 事件 ondragstart中设置 |
| setDragImage(element, x, y) |
指定一副图像，当拖动发生时，显示在光标下方。这个方法接受的三个参数分别是要显示的HTML元素和光标在图像中的x、y坐标。 其中，HTML元素（可以是隐藏的元素）可以是一副图像，也可以是其它元素。是图像则显示图像，是其它元素则显示渲染后的元素。 实现这个方法的浏览器有Firefox 3.5+、Safari 4+ 和 Chorme |
| files |
获取外部拖拽文件的一个类似数组的集合（length）。集合中每个元素有type属性，依次判断拖拽的文件类型。 实现这个属性的浏览器有IE10+、Firefox 3.5+和Chrome。 |
注：只能在拖放事件的事件处理程序中访问dataTransfer对象。
保存在dataTransfer对象中的数据只能在【目标元素】事件处理程序中读取。
关于FileReader（读取文件信息）
| readAsDataURL |
参数为要读取的文件对象，将文件读取为DataUrl |
| onLoad |
读取成功完成时触发此事件，this.result 获取读取的文件数据，如果是图片，将返回base64格式的图片数据 |
例：
var fd=new FileReader();
fd.readAsDataURL(fs[0]); //fs为event.dataTransfer.files获得的集合
fd.onLoad=function(){
alert(this.result)
}
一个完整的实例（拖拽上传预览）：
<html>
<head>
<title></title>
<style>
* {
padding: 0px;
margin: 0px;
}
#oDiv1 {
width: 300px;
height: 300px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="oDiv1"></div>
<script>
var oDiv1 = document.getElementById("oDiv1");
var oDiv2 = document.getElementById("oDiv2");
oDiv1.ondragenter = function (ev) {
this.style.borderStyle = "dashed";
}
oDiv1.ondrop = function (ev) {
var files = ev.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
reader.onload = (function (f) {
return function () {
oDiv1.innerHTML = ‘<img src="‘ + this.result + ‘" title="‘ + f.name + ‘" width="100%" />‘;
}
})(f)
//(function(f){reader.onload = function (ev) {
// oDiv1.innerHTML = ‘<img src="‘ + ev.target.result + ‘" title="‘ + f.name + ‘" width="100%" height="100%" />‘;
//}})(f)
reader.readAsDataURL(f);
}
this.style.borderStyle = "solid";
ev.stopPropagation();
ev.preventDefault();
}
oDiv1.ondragover = function (ev) {
ev.stopPropagation();
ev.preventDefault();
}
oDiv1.ondragleave = function (ev) {
this.style.borderStyle = "solid";
}
</script>
</body>
</html>
时间： 2024-08-25 05:01:55