《JavaScript高级程序设计》学习笔记（拖放）
拖放
拖放(Drag and Drop)
有两种使用JavaScript的方法来实现拖放功能：系统拖放和模拟拖放
系统拖放
只有Windows中的IE支持网页上的系统拖动
拖放事件
拖动项事件
某个项目被拖动时，以下事件会按顺序触发
1 dragstart：开始移动鼠标时，在被拖动项上触发
2 drag：在触发dragstart事件后，鼠标拖动时一直触发
3 dragend：拖动停止时触发
放置目标事件
1 dragenter：对象拖动到有效放置目标上时触发
2 dragover：对像在目标边界内时一直触发
3 dragleave：对象拖出放置目标后触发
4 drop：对象在目标上放下时触发
使用所有的拖放事件
一般被拖动项的事件总是先发生，除了drop事件比dragend先触发
默认情况下，文本框是网页上唯一有效的放置目标
自定义放置目标
默认情况下，这是不允许的，不过可通过改变dragover和dragenter事件的默认行为，在任何对象创建放置目标。
<script type="text/javascript">
function handleDragDropEvent(oEvent) {
oEvent.returnValue = false;
}
</script>
<div ondragover="handleDragDropEvent(event)"
ondragenter="handleDragDropEvent(event)">
</div>
数据传输对象dataTransfer
可用这个对象的特性和方法来实现拖放功能
方法
getData() 方法 获取由setData()存储的值
可以设置两种类型的数据：普通文本和URL
参数是字符串，表示要设置那个类型的数据，可以是"text或"URL"
setData() 方法
第一个参数是字符串，表示要设置那个类型的数据
第二个参数是数据内容
有两个空间分别存放普通文本和URL，重复调用会覆盖原来的内容
例如：
oEvent.dataTransfer.setData("text", "hello");
var sData = oEvent.dataTransfer.getData("text");
oEvent.dataTransfer.setData("URl", "http://www.sina.com/");
var sURl = oEvent.dataTransfer.getData("URl");
储存在dataTransfer中的数据在drop事件发生前可用，如果在ondrop事件中没有去获取其中的数据，dataTransfer就会销毁
当从文本框中拖动文本时，系统调用setData()将被拖动的文本存储在"text"格式中，可以用getData()获取这个值。
如果数据是URL，浏览器会转到这个URL
dropEffect 属性 设置在放置目标上，用来确定允许哪种类型的放置行为
值 意思
none 被拖动的项不能放在这个地方（除文本框外的默认值）
move 表示被拖动的项应该移动到放置对象上
copy 表示被拖动的项应该复制到放置对象上
link 表示放置对象将会浏览到被拖动的项（URl时有效）
如果使用dropEffect属性，必须在放置对象的ondragenter事件处理函数中设置
effectAllowed 属性 表示对被拖动的项允许哪种dropEffect
值 意思
uninitialized 不设置任何动作
none 不允许任何动作
copy 只允许copy
link 只允许link
move 只允许move
copyLink 只允许copy和link
copyMove 只允许copy和move
linkMove 只允许link和move
all 允许所有dropEffect
这个属性必须在ondragstart事件处理函数中设置
模拟拖放
1 创建拖放对象，设置样式（其中position: absolute;是必须的），并添加onMouseDown事件触发拖动
<style type="text/css">
#div1 {
background-color: red;
height: 100px;
width: 100px;
position: absolute;
z-index: 10;
}
</style>
<div id="div1" onMouseDown="handleMouseDown(event)"></div>
2 创建onMouseDown事件执行程序handleMouseDown
先定义两个变量储存拖放对象相对鼠标的位置
var iDiffX = 0;
var iDiffY = 0;
执行程序
function handleMouseDown() {
var oEvent = EventUtil.getEvent();
var oDiv = document.getElementById("div1");
//初始化位置变量
iDiffX = oEvent.clientX - oDiv.offsetLeft;
iDiffY = oEvent.clientY - oDiv.offsetTop;
//添加"mousemove"和"mouseup"事件
EventUtil.addEventHandler(document.body, "mousemove", handleMouseMove);
EventUtil.addEventHandler(document.body, "mouseup", handleMouseUp);
}
3 创建onMouseMove事件执行程序handleMouseMove，用于拖动对象
function handleMouseMove() {
var oEvent = EventUtil.getEvent();
var oDiv = document.getElementById("div1");
//鼠标移动同时设置拖动对象样式产生移动效果
oDiv.style.left = oEvent.clientX - iDiffX;
oDiv.style.top = oEvent.clientY - iDiffY;
}
4 创建onMouseUp事件执行程序handleMouseUp
function handleMouseUp() {
var oEvent = EventUtil.getEvent();
//移除事件
EventUtil.removeEventHandler(document.body, "mousemove", handleMouseMove);
EventUtil.removeEventHandler(document.body, "mouseup", handleMouseUp);
}
创建放置目标
为模拟拖放创建放置目标，当鼠标坐标在放置目标内时把拖动元素放入放置目标
其中1、2、3步同上
4 创建放置目标，设置样式（其中position: absolute;是必须的）
<style type="text/css">
#divDropTarget {
background-color: blue;
height: 200px;
width: 200px;
position: absolute;
left: 300px;
}
</style>
<div id="divDropTarget"></div>
5 创建onMouseUp事件执行程序handleMouseUp
function handleMouseUp() {
var oEvent = EventUtil.getEvent();
//移除事件
EventUtil.removeEventHandler(document.body, "mousemove", handleMouseMove);
EventUtil.removeEventHandler(document.body, "mouseup", handleMouseUp);
//如果鼠标坐标在放置目标内时把拖动元素放入放置目标
if (isOverDropTarget(oEvent.clientX,oEvent.clientY)) {
alert("dropped!");
var oDiv = document.getElementById("div1");
var oTarget = document.getElementById("divDropTarget");
oDiv.style.left = oTarget.offsetLeft;
oDiv.style.top = oTarget.offsetTop;
}
}
6 创建判断鼠标坐标是否在放置目标内的函数isOverDropTarget
function isOverDropTarget(iX, iY) {
var oTarget = document.getElementById("divDropTarget");
var iX1 = oTarget.offsetLeft;
var iX2 = iX1 + oTarget.offsetWidth;
var iY1 = oTarget.offsetTop;
var iY2 = iY1 + oTarget.offsetHeight;
return (iX >= iX1 && iX <= iX2 && iY >= iY1 && iY <= iY2);
}