很多前端恐怕都不了解html5的拖拽怎么实现吧，本文了解了下思路。进行整理备份，便于以后查阅。
先上示例：
index.html
xml/html code复制内容到剪贴板
nbsp;html>   html>   head>       meta charset=utf-8>       title>dragtitle>       style>           .box{                width: 400px;                height: 400px;                float: left;            }            #box1{                background: #ccc;            }            #box2{                background: #ff0;            }        style>   head>   body>   div id=box1 class=box>div>   div id=box2 class=box>div>   img src=http://pica.zol-img.com.cn/2016/02/1ace90ad77db716547614a18c4a9263g.jpg alt= id=img1 />
javascript code复制内容到剪贴板
>
app1.js    /**    *   app1.js    */      var obox1,        obox2,        oimg1;       window.onload = function(){        obox1 = document.getelementbyid('box1');        obox2 = document.getelementbyid('box2');        oimg1 = document.getelementbyid('img1');           //        obox1.ondragover = obox2.ondragover = function(e){            e.preventdefault();        };           //        oimg1.ondragstart = function(e){            e.datatransfer.setdata('text', e.target.id);        };           obox1.ondrop = dropimg;        obox2.ondrop = dropimg;    };       function dropimg(e){        e.preventdefault();        var tempimg = document.getelementbyid(e.datatransfer.getdata('text'));        e.target.appendchild(tempimg);    }     涉及知识点
在拖放的过程中会触发以下事件：
在拖动目标上触发事件 (源元素)
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发
释放目标时触发的事件
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
event对象（以e代替）
e.target
w3cschool上的解释是：返回触发此事件的元素（事件的目标节点），这个target属性只兼容ie9及以上
e.preventdefault()
取消事件的默认动作。
e.datatransfer.setdata()
设置被拖数据的数据类型和值：
复制代码
代码如下:
e.datatransfer.setdata(text,ev.target.id); //第一个参数为text（小写的也行）
e.datatransfer.getdata()
获得被拖的数据：
复制代码
代码如下:
e.datatransfer.getdata(text);
以上就是本文的全部内容，希望对大家的学习有所帮助。
原文：http://www.cnblogs.com/oovwall/p/5213580.html