关于HTML5的拖拽

不介绍具体情况，先看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>