分享一个HTML5实现拖放的实例代码

互联网 17-5-4

在html5中，支持拖放API接口，通过该功能，数据可以在浏览器与其他应用程序之间互相拖放，想要实现该操作，必须经过一下两个步骤（1）将想要拖放的对象标签的draggable属性设为true。这样才能将该标签进行拖放，令外，img标签与a标签必须指定为true，默认允许拖放。 (2)编写与有拖放有关的事件处理代码，常用的播放事件如下： dragstart 开始拖放操作 drag 拖放过程中 dragenter 被拖放的标签开始进入本标签的范围内 dragover 被拖放的标签正在本标签范围内移动 dragleave 被拖放的标签离开本标签的范围 drop 有其他的标签被拖放到本标签中 dragend 拖放操作结束

<!DOCTYPE HTML>  <html>  <head>  <meta charset="utf-8">  <title>拖放</title>  <script type="text/javascript">  function init()   {      // (1) 拖放开始      source.addEventListener("dragstart", function(ev)       {         //(1) 向dataTransfer对象追加数据          var dt = ev.dataTransfer;          dt.effectAllowed = 'all';             //(2) 拖动元素为dt.setData("text/plain", this.id);           dt.setData("text/plain", "你好");       }, false);        // (3) dragend：拖放结束      dest.addEventListener("dragend", function(ev)       {          //不执行默认处理（拒绝被拖放）          ev.preventDefault();       }, false);      // (4) drop:被拖放      dest.addEventListener("drop", function(ev)       {          // 从DataTransfer对象那里取得数据          var dt = ev.dataTransfer;          //(5) 不执行默认处理（拒绝被拖放）          ev.preventDefault();          //停止事件传播          ev.stopPropagation();      }, false);  }  </script>  </head>  <body onload="init()">  <h5>请拖放</h5>  </html>

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

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

以上就是分享一个HTML5实现拖放的实例代码的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：拖放，实例