HTML 5 拖放[拖放图片]

最新推荐文章于 2024-08-08 23:38:27 发布

AceLuffer

最新推荐文章于 2024-08-08 23:38:27 发布

阅读量936

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/tenning/article/details/9325867

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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