标签：
拖放（drag and drop）
实现拖动目标并放置到指定区域。
使元素可拖动，涉及到元素的全局属性draggable
<img draggable="true" />
即img元素设置为可拖动。
浏览HTML的Mouse事件属性,需要为img分配ondragstart属性，为div分配ondrop和ondragover属性。
首先需要确定拖动对象，即需要获取被drag元素的数据，这里用到dataTransfer对象的setData方法，设被调用方法名称为drag(ev)，则该方法定义如下：
function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); }
当draggable数据被drop时，首先drop区域div要允许img被放在此处，这是要用ondragover属性调用一个function，用到方法preventDefault()，设function名为allowDrop(ev):
function allowDrop(ev){ ev.preventDefault(); }
当被拖动元素被drop时，执行drop事件。用到body对象的appendChild方法(即“附加行为”)。用getData()获取“附加”到drop目的地的元素数据，传给ondrop()，此处的数据即先前由setData()获得的img元素数据。设方法为drop:
function drop(ev){ var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.preventDefault(); alert("233"); }
1.dataTransfer对象的getData方法，获取img数据
2.target对象的appendChild方法，附加新获取的img数据到原div元素数据
3.document对象的getElementById方法，
完整代码：
<p>move the picture to the div</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ></div> <img id="drag1" src="http://www.gbtags.com/gb/laitu/100x100&text=GBtags/efb73e/FFFFFF" draggable="true" ondragstart="drag(event)"></img> <style type="text/css"> div { width:100px; height:100px; padding:10px; border:1px solid #CCC;} </style> <script>function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); } function allowDrop(ev){ ev.preventDefault(); } function drop(ev){ var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.preventDefault(); alert(‘Move Successfully!‘); }</script>
资料：http://www.jb51.net/shouce/dhtml/objects/DD.html
标签：
原文地址：http://www.cnblogs.com/suzyc/p/4684679.html
