HTML5 拖动

1、拖动什么:ondragstart="drag(event)":

function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
} //设置被拖数据的类型与值

2、放到何处:ondragover="allowDrop(event)":

function allowDrop(ev){
ev.preventDefault();
}//设置将数据/元素放置到其他元素中

3、进行放置:ondrop="drop(event)":

function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

实现如下:
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/login/fly.png" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

  • 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
  • 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
  • 被拖数据是被拖元素的 id ("drag1")
  • 把被拖元素追加到放置元素(目标元素)中

你可能感兴趣的:(html5,图片拖动,ondragover,ondragstart,ondrop)