HTML 5 拖放[拖放图片]

来源：互联网发布：淘宝购物车营销怎么开编辑：程序博客网时间：2024/05/17 15:17

拖放（Drag 和 drop）是 HTML5 标准的组成部分；

拖放

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

拖放实例：

<head> <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> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 【放到何处 - ondragover】【进行放置 - ondrop】<img id="drag1" src="img_logo.gif"  draggable="true"【首先，为了使元素可拖动，把 draggable 属性设置为 true ：】                    ondragstart="drag(event)" width="336" height="69" /> 【拖动什么 - ondragstart 和 setData()】</body>

代码解释：

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