浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5。
1、把标签 draggable 属性设置为 true。
2、向标签添加ondragstart 属性调用了一个函数drag(event)。
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id); } //设置被拖数据的数据类型和值
3、向要拖放的位置(目标元素)标签添加ondragover属性调用一个函数allowDrop(event)。
function allowDrop(ev){
ev.preventDefault();} //避免浏览器对数据的默认处理
4、向要拖放的位置(目标元素)标签添加ondrop属性调用一个函数drop(event)。
当放置被拖数据时，会发生 drop 事件。
function drop(ev){
ev.preventDefault(); //避免浏览器对数据的默认处理
var data=ev.dataTransfer.getData("Text"); //获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
ev.target.appendChild(document.getElementById(data)); } //把被拖元素追加到目标元素中
5、示例如下：
<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>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="aa.png" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
执行如下：
我们可将图片来回拖放在div1和div2中。