站长资讯网
最全最丰富的资讯网站

HTML5拖放(Drag 和 drop)实例讲解

拖放(Drag 和 drop)是 HTML5 标准的组成部分。

拖放

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

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

浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。

注意:Safari 5.1.2不支持拖动.

HTML5 拖放实例

下面的例子是一个简单的拖放实例:

<!DOCTYPE HTML>  <html>  <head>  <script>  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>  <img id="drag1" src="img_logo.gif" draggable="true"  ondragstart="drag(event)" width="336" height="69">  </body>  </html>

它看上去也许有些复杂,不过我们可以分别研究拖放事件的不同部分。

设置元素为可拖放

首先,为了使元素可拖动,把 draggable 属性设置为 true :

<img draggable="true">

拖动什么 – ondragstart 和 setData()

然后,规定当元素被拖动时,会发生什么。

在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值:

function drag(ev)  {  ev.dataTransfer.setData("Text",ev.target.id);  }

【相关推荐】

1. 特别推荐:“php程序员工具箱”V0.1版本下载

2. 免费h5在线视频教程

3. php.cn原创html5视频教程

赞(0)
分享到: 更多 (0)