巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
建站资讯News

HTML5 拖放功效实古代码

0
一佰互联网站扶植(www.taishanly.com) 宣布时候:2020-04-20 08:56:18 阅读数: 104
在HTML5中,拖放是规范的一局部,任何元素都能够或许拖放,详细内容以下

1、拖放 

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <style type="text/css">  
  5. #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}   
  6. </style>  
  7. <script>  
  8. function allowDrop(ev)   
  9. {   
  10. ev.preventDefault();   
  11. }   
  12. function drag(ev)   
  13. {   
  14. ev.dataTransfer.setData("Text",ev.target.id);   
  15. }   
  16. function drop(ev)   
  17. {   
  18. ev.preventDefault();   
  19. var data=ev.dataTransfer.getData("Text");   
  20. ev.target.appendChild(document.getElementById(data));   
  21. }   
  22. </script>  
  23. </head>  
  24. <body>  
  25. <p>拖动 W3CSchool.cc 图片到矩形框中:</p>  
  26. <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>  
  27. <br>  
  28. <img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">  
  29. </body>  
  30. </html>   

2、设置元素为可拖放
 
起首,为了使元素可拖动,把 draggable 属性设置为 true :<img draggable="true">
 
3、拖动甚么 - ondragstart 和 setData()
 
而后,划定当元素被拖动时,会产生甚么。在下面的例子中,ondragstart 属性挪用了一个函数,drag(event),它划定了被拖动的数据。dataTransfer.setData() 体例设置被拖数据的数据范例和值:

JavaScript Code复制内容到剪贴板
  1. function drag(ev)   
  2. {   
  3.    ev.dataTransfer.setData("Text",ev.target.id);   
  4. }    

在这个例子中,数据范例是 "Text",值是可拖动元素的 id ("drag1")。
 
4、放到那边 - ondragover
 
ondragover 事件划定在那边安排被拖动的数据。默许地,没法将数据/元素安排到其余元素中。若是须要设置许可安排,咱们必须禁止对元素的默许处置体例。这要经由过程挪用 ondragover 事件的 event.preventDefault() 体例:event.preventDefault()
 
5、停止安排 - ondrop
 
 当安排被拖数据时,会产生 drop 事件。在下面的例子中,ondrop 属性挪用了一个函数,drop(event):

JavaScript Code复制内容到剪贴板
  1. function drop(ev)   
  2. {   
  3. ev.preventDefault();   
  4. var data=ev.dataTransfer.getData("Text");   
  5. ev.target.appendChild(document.getElementById(data));   
  6. }    

代码诠释:

挪用 preventDefault() 来避免阅读器对数据的默许处置(drop 事件的默许行动因此链接情势翻开)。经由过程 dataTransfer.getData("Text") 体例取得被拖的数据。该体例将前往在 setData() 体例中设置为不异范例的任何数据。被拖数据是被拖元素的 id ("drag1")。把被拖元素追加到安排元素(方针元素)中。

以上便是本文的全数内容,但愿对大师的进修有所赞助,也但愿大师多多撑持网页设想。

一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。比来几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。更多资讯:tags标签

上一篇:HTML5和CSS3实例教程总结(保举)
下一篇: HTML块级标签汇总(小篇)
[前往消息列表]

相干消息more

17
12月
网站内容排版想更惹人入胜要若何设想

网站内容排版一向是设想中的重点,不只是客户对内容的须要,也是企业对网站的要求!普通企业网站的内容是指笔墨内容、图片内容、音视频内容;排版是指... >>概况

23
04月
Docker若何进入启动容器

本文先容了Docker若何进入启动容器,分享给大师,详细以下:在利用-d参数时,容器启动后会进入背景,用户没法看到容器中的信息,也没法停止操... >>概况

14
05月
【SEO根本入门】甚么样的用户休会能力有好的

明天写这篇文章是比来阐发网站得出的概念:要取得应合适。跟着搜刮引擎智能算法的不时进步,搜刮引擎愈来愈人道化,对网站权重的影响也愈来愈大了。... >>概况

29
04月
收费的ip数据库淘宝IP地点库简介和PHP调

一、对于淘宝IP地点库咱们今朝供给的办事包含:1. 按照用户供给的IP地点,疾速查问出该IP地点地点的地舆信息和地舆相干的信息,包含国度、省... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站