一.被拖動的元素
- 如何使一個元素變得可拖動
一些標(biāo)簽?zāi)J(rèn)能夠拖動辣苏，如 "img", "a" 標(biāo)簽,要使任何元素都可拖動(draggable),HTML5元素有個新特性叫draggable塑猖，支持IE9+:
// draggable 有3個值true, false, inherit
<div id="dragbox" draggable="true"></div>
// 使默認(rèn)可拖動元素變得不可拖動
<a >google</a>
對于IE8-可以在mousedown的時候?qū)δ繕?biāo)元素添加一個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 按下鼠標(biāo)準(zhǔn)備拖動時觸發(fā)，可以用于setData()，effectAllowed
- drag 拖動過程中觸發(fā)
- dragend 松開鼠標(biāo)的一瞬間觸發(fā)
二.可放置元素(droppable)
1.元素拖到可防止區(qū)域發(fā)生的事件
- dragenter 進(jìn)入元素邊界時觸發(fā) (可設(shè)置dropeffect)
- dragover 在元素內(nèi)移動時持續(xù)促發(fā)
- dragleave (放置不成功時觸發(fā))或者 drop (放置成功時觸發(fā)距境， 可用于getData())
2.如何使一個元素變?yōu)榭煞胖脜^(qū)域
只需要重寫dragenter,dragover默認(rèn)行為，F(xiàn)irefox要將drop默認(rèn)行為也重寫垮卓，為保持兼容性問題垫桂，將3個默認(rèn)行為都改寫：
// div樣式設(shè)置省略
<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對象
僅僅使元素變得可拖動，可放置沒有作用粟按，在拖動和放置的時候要進(jìn)行數(shù)據(jù)交換才有用诬滩。
dataTransfer是event的一個屬性，只有drag-and-drop事件觸發(fā)時才存在
1.主要的兩個方法setData()和getData()
setData():
1. @param1 數(shù)據(jù)類型 "text" 或者 "url", HTML5新增MIME類型灭将，這兩個類型對應(yīng)MIME類型為
"text/plain"和"text/uri-list"
2. @param2 字符串內(nèi)容
3. 應(yīng)該在 dragstart事件 中設(shè)置該屬性
getData()
1. @param 接受數(shù)據(jù)類型 "Text"(T大寫為了保證兼容firefox) 或者 "url"
2. 應(yīng)當(dāng)在 drop事件 中獲取數(shù)據(jù)疼鸟，從而拖動目標(biāo)與放置目標(biāo)進(jìn)行數(shù)據(jù)交換
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
表示拖動效果，以及鼠標(biāo)樣式
1. dropEffect 設(shè)置在 "dragenter" 事件發(fā)生時庙曙，none, move, copy, link 4種效果
2. effectAllowed 設(shè)置在 "dragstart" 事件發(fā)生時空镜， none, move, copy...多種樣式
3.其他一些屬性
setDragImage(element, x, y)
允許在拖動時光標(biāo)下指定圖片顯示，3個參數(shù)
@params1 一個html元素
@params2 @params3 圖片坐標(biāo)
不支持IE, 在"dragstart"事件時設(shè)置
四.具體示例
<!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設(shè)置為可放置元素
big.addEventListener("dragenter", dragEnter, false);
big.addEventListener("dragover", dragOver, false);
big.addEventListener("drop", dragDrop, false);
// section設(shè)置為可放置元素
section.addEventListener("dragenter", dragEnter, false);
section.addEventListener("dragover", dragOver, false);
section.addEventListener("drop", dragDrop, false);
</script>
</body>
</html>
五.小結(jié)
- 主要考慮如何讓元素如何變得可拖動
- 如何讓元素變?yōu)榭煞胖?/li>
- 元素在拖動與放置的時候進(jìn)行數(shù)據(jù)交換
