不介绍具体情况，先看API，注意看后面括号的说明
-
dragstart：拖拽开始（应用于被拖拽对象） -
drag：拖拽中（应用于被拖拽对象） -
dragenter：拖拽到指定位置（应用于拖拽目标） -
dragleave：拖拽离开指定位置（应用于拖拽目标） -
dragover：拖拽在指定位置（应用于拖拽目标） -
drop：在指定位置释放（应用于拖拽目标） -
dragend：拖拽结束（应用于被拖拽对象）
|
事件 |
描述 |
目标 |
|
dragstart |
开始拖对象时触发 |
被拖动对象 |
|
dragenter |
当对象第一次被拖动到目标对象上时触发，同时表示该目标对象允许‘放’这动作 |
目标对象 |
|
dragover |
当对象拖动到目标对象时触发 |
当前目标对象 |
|
dragleave |
在拖动过程中，当被拖动对象离开目标对象时触发 |
先前目标对象 |
|
drag |
每次当对象被拖动时就会触发 |
被拖动对象 |
|
drop |
当发生“放”这动作时触发 |
当前目标对象 |
|
dragend |
在拖放过程，松开鼠标时触发 |
被拖动对象 |
使用方法
在需要被拖拽的对象上设置属性draggable="true"，但设置此属性后，对象将不能被选中。
使用范围
不是所有的object都支持的，通常支持块，比如div p span，但不支持select option等,但可以把他们放到div里面。
例子见代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
var obj = document.getElementById("obj");
var left = document.getElementById("left");
var right = document.getElementById("right");
//设置拖拽的对象的光标
obj.style.cursor = "move";
obj.ondragstart = function (e) {//事件顺序：1
//设置内容，非必要,前为格式，后为值,取值为text|URL对应是text/plain|text/url-list,实际可为MIME，不同类型可同时保存
e.dataTransfer.setData("text", obj.id);
/*被拖动的元素能执行的行为，包括
none：不能把拖动的元素放在这里。这是除了文本框之外所有元素默认的值。
move：应该把拖动的元素移动到放置目标。
copy：应该把拖动的元素复制到放置目标。
link：放置目标会打开拖动的元素(但拖动的元素必须是个链接，有URL地址)。
把元素拖动到放置目标上的时候，以上每一个值都会导致光标显示为不同的符号。
*/
e.dataTransfer.dropEffect = "move";
/*仅设置dropEffect是无效的，需要结合effectAllowed，此属性表示允许拖动元素的那种行为，即移动此物体到能带有ondrop事件的物体上空时鼠标下方显示的样式，
取值如下
uninitialized：没有给被拖动元素设置任何放置行为。
none：被拖动的元素不能有任何行为
copy：只允许值为”copy”的dropEffect。
link：只允许值为”link”的dropEffect。
move：只允许值为”move”的dropEffect。
copyLink：允许值为”copy”和”link”的dropEffect。
copyMove：允许值为”copy”和”move”的dropEffect。
linkMove：允许值为”link”和”move”的dropEffect。
all：允许任意dropEffect。
要设置effectAllowed属性必须在ondragstart事件处理程序中设置。
*/
e.dataTransfer.effectAllowed = "move";
//e.dataTransfer.setDataImage(Element image,long x,long y);//设置拖拽显示的替代图像。存在兼容问题
//e.dataTransfer.addElement(Element element);//设置在拖放的同时更随拖放的对象。存在兼容问题
return true;
};
obj.ondrag = function (e) {//事件顺序：2
//只要拖着没放，就一直执行，无论在那个对象上方
};
obj.ondragend = function (e) {//事件顺序：6
//拖放完成了，清理工作
e.dataTransfer.clearData("text");//不清理应该也没问题，会自动清理
};
left.ondragenter=right.ondragenter = function (e) {//事件顺序：3
this.style.backgroundColor = "rgb(230,230,230)";
};
left.ondragover = right.ondragover = function (e) {//事件顺序：4
e.preventDefault();//必须设置，否则无法执行ondrop
//这里设置当拖动的物体在目标物体上方移动时的代码
};
left.ondragleave = right.ondragleave = function (e) {//事件顺序：5(并列)
this.style.backgroundColor = "";
}
left.ondrop = right.ondrop = function (e) {//事件顺序：5(并列)
//e.dataTransfer.files如果是文件拖拽，可以读取
this.style.backgroundColor = "";
var id = e.dataTransfer.getData("text");
var element = document.getElementById(id);
if (element.parentElement&&element.parentElement!=this)
element.parentElement.removeChild(element);
this.appendChild(element);//同一对象重复添加不会错
};
};
</script>
<div id="left" style="width:150px;height:200px;border:1px solid black;float:left;">
<span id="obj" draggable="true" style="border:2px dotted gray;">测试文字</span>
</div>
<div id="right"style="width:150px;height:200px;border:1px solid black;float:left;"> </div>
</body>
</html>