1，首先，你要告诉计算机那个元素可以拖动，或者是一张图，或者是一个盒子，在标签里面加上 draggable="true"
2，然后，监听该元素被拖动的函数 ondragstart="drag(event)"
3，drag 里面告诉计算机是那个元素被拖动的 ev.dataTransfer.setData("Text",ev.target.id);
4，接下来将拖动的元素放到哪个盒子，（或者是经过那个盒子，经过某个盒子的时候触法 ondragover 函数 ）当然了，这个盒子要告诉计算机，我是个盒子，可以把东西放我这里 ev.preventDefault(); 这句的意思就是说计算机别限制我“禁止”拖动
5，当鼠标松开的时候 触发事件 ondrop="drop(event)" ， 这个函数里面 介绍是谁被拖动的ev.dataTransfer.getData("Text");，放到了哪里ev.target ，就把被拖动的元素插入这个盒子里面，ev.target.appendChild(document.getElementById(data)); 效果就实现了。
6，这个是我自己的理解，有不对的欢迎指正。
下面，是简单的源码
<!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 {width:488px;height:370px;padding:10px;border:1px solid #aaaaaa;} #div2 {width:488px;height:370px;padding:10px;border:1px solid #aaaaaa;} </style> <script type="text/javascript"> function allowDrop(ev){ ev.preventDefault(); } function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev){ ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> <meta charset="utf-8"> </head> <body> <p>请把 W3School 的图片拖放到矩形中：</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br /> <img id="drag2" src="images/001(2)_01.jpg" draggable="true" ondragstart="drag(event)" width="460" height="221" /> </body> </html>
上面这个是基本的这种功能，其实拖放有很强大的功能，本吊也仅仅知道其中的一小部分，下面贴一个稍微复杂点的应用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> *{ margin:0; padding:0} .mask { position:fixed; width:100%; height:100%; background-color:rgba(0,0,0,.4); top:0px; left:0px;} .mask_footer { width:300px; height:220px; position:relative; left:50%; top:50%; background-color:#fff; border:solid 1px #ccc ; margin-left:-150px; margin-top:-100px;} .title { background-color: #960; color: #fff; height:30px; line-height:30px; cursor:move; } .close { width:20px; height:20px; font-size:18px; position:absolute; right:5px; top:5px; cursor:pointer;} .close:hover { color:#fff;} #but { width:200px; height:40px;} </style> </head> <body> <button type="button" value="test" id="but" >test</button> <div class="mask" ondrop="drop(event)" ondragover="allowDrop(event)"> <div class="mask_footer" id="testid" > <span class="close">×</span> <h3 class="title" draggable="true" draggable="true" ondragstart="drag(event)" >点击我可以移动位置</h3> <div>文本内容》。。。、</div> </div> </div> <script> var but =document.getElementById("but"); var mask = document.getElementsByClassName("mask")[0]; var clos = document.getElementsByClassName("close")[0]; but.addEventListener("click",show); clos.addEventListener("click",hide); var nowx , nowy ; function show(){ mask.style.display = "block "; } function hide (){ mask.style.display = "none"; } function allowDrop(ev){ ev.preventDefault(); } function drag(ev){ var dragId = ev.target.parentNode.id; var dragImg = document.getElementById(dragId); ev.target.offsetX; var yuanX = ev.target.parentNode.offsetLeft ; var yuanY = ev.target.parentNode.offsetTop ; nowx =ev.clientX ; nowy =ev.clientY ; nowx = nowx - yuanX ; nowy = nowy - yuanY; ev.dataTransfer.setData("Text",dragId); ev.dataTransfer.setDragImage(dragImg,nowx,nowy); } function drop(ev){ ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); var dX = ev.clientX -nowx; var dY = ev.clientY -nowy ; var ele = document.getElementById(data); ele.style.left = dX +"px"; ele.style.top = dY +"px"; ele.style.marginLeft= "0px"; ele.style.marginTop = "0px"; } </script> </body> </html>
这个是模仿百度登陆框做的一个功能，当然了，也很普通。