一.被拖动的元素
- 如何使一个元素变得可拖动
一些标签默认能够拖动，如 "img", "a" 标签,要使任何元素都可拖动(draggable),HTML5元素有个新特性叫draggable，支持IE9+:
// draggable 有3个值true, false, inherit
<div id="dragbox" draggable="true"></div>
// 使默认可拖动元素变得不可拖动
<a href="https://www.google.hk/">google</a>
对于IE8-可以在mousedown的时候对目标元素添加一个dragdrop()方法(以下代码仅针对IE8-)：
<div id="box"></div>
// IE8-以下要考虑到兼容性问题
var box = document.getElementById("box");
box.attachEvent("onmousedown", function(event) {
event = event || window.event;
var target = event.target || event.srcElement;
target.dragdrop();
})
2.被拖动元素拖动事件
- dragstart 按下鼠标准备拖动时触发，可以用于setData()，effectAllowed
- drag 拖动过程中触发
- dragend 松开鼠标的一瞬间触发
二.可放置元素(droppable)
1.元素拖到可防止区域发生的事件
- dragenter 进入元素边界时触发 (可设置dropeffect)
- dragover 在元素内移动时持续促发
- dragleave (放置不成功时触发)或者 drop (放置成功时触发， 可用于getData())
2.如何使一个元素变为可放置区域
只需要重写dragenter,dragover默认行为，Firefox要将drop默认行为也重写，为保持兼容性问题，将3个默认行为都改写：
// div样式设置省略
<div id="dropTarget"></div>
var dropTarget = document.getElementById("dropTarget");
dropTarget.addEventListener("dragenter", function(e) {
e.preventDefault();
}, false);
dropTarget.addEventListener("dragover", function(e) {
e.preventDefault();
}, false);
dropTarget.addEventListener("drop", function(e) {
e.preventDefault();
}, false);
三.dataTransfer对象
仅仅使元素变得可拖动，可放置没有作用，在拖动和放置的时候要进行数据交换才有用。
dataTransfer是event的一个属性，只有drag-and-drop事件触发时才存在
1.主要的两个方法setData()和getData()
setData():
1. @param1 数据类型 "text" 或者 "url", HTML5新增MIME类型，这两个类型对应MIME类型为
"text/plain"和"text/uri-list"
2. @param2 字符串内容
3. 应该在 dragstart事件 中设置该属性
getData()
1. @param 接受数据类型 "Text"(T大写为了保证兼容firefox) 或者 "url"
2. 应当在 drop事件 中获取数据，从而拖动目标与放置目标进行数据交换
eg:
event.dataTransfer.setData("text", "some text");
event.dataTransfer.setData("url", "http://www.google.com");
var url = event.dataTransfer.getData("url") ||
event.dataTransfer.getData("text/uri-list");
var text = event.dataTransfer.getData("Text");
2.dropEffect和effectAllowed
表示拖动效果，以及鼠标样式
1. dropEffect 设置在 "dragenter" 事件发生时，none, move, copy, link 4种效果
2. effectAllowed 设置在 "dragstart" 事件发生时， none, move, copy...多种样式
3.其他一些属性
setDragImage(element, x, y)
允许在拖动时光标下指定图片显示，3个参数
@params1 一个html元素
@params2 @params3 图片坐标
不支持IE, 在"dragstart"事件时设置
四.具体示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.drag{
width: 200px;
height: 200px;
background-color: red;
display: inline-block;
margin-right: 10px;
}
#boxB {
margin-right: 0;
}
#big {
width: 415px;
height: 400px;
background: green;
margin: 20px auto;
}
section {
width: 415px;
height: 200px;
background-color: gray;
margin: 20px auto;
}
</style>
</head>
<body>
<div id="big"></div>
<section id="section">
<div class="drag" id="boxA" draggable="true"></div>
<div class="drag" id="boxB" draggable="true"></div>
</section>
<script>
var section = document.getElementById("section"),
big = document.getElementById("big"),
boxA = document.getElementById("boxA"),
boxB = document.getElementById("boxB");
// EventUtil.addHandler(boxA, "mousedown", function(e) {
// e = EventUtil.getEvent(e);
// var target = EventUtil.getTarget(e);
// target.dragDrop();
// });
// dragstart事件handler
function dragStart(event) {
event = event || window.event;
var target = event.target || event.srcElement;
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("Text", target.getAttribute("id"));
event.dataTransfer.setDragImage(target, 100, 100);
return true;
}
function dragEnter(event) {
event = EventUtil.getEvent(event);
event.preventDefault();
return true;
}
function dragOver(event) {
event = event || window.event;
event.preventDefault();
}
// drop事件处理handler
function dragDrop(event) {
event = event || window.event;
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
event.stopPropagation();
return false;
}
boxA.addEventListener("dragstart", dragStart, false);
boxB.addEventListener("dragstart", dragStart, false);
// big设置为可放置元素
big.addEventListener("dragenter", dragEnter, false);
big.addEventListener("dragover", dragOver, false);
big.addEventListener("drop", dragDrop, false);
// section设置为可放置元素
section.addEventListener("dragenter", dragEnter, false);
section.addEventListener("dragover", dragOver, false);
section.addEventListener("drop", dragDrop, false);
</script>
</body>
</html>
五.小结
- 主要考虑如何让元素如何变得可拖动
- 如何让元素变为可放置
- 元素在拖动与放置的时候进行数据交换
