HTML5如何如何实现元素拖拽

冉冉升起的如银的炊烟,那更古沉默永不停息的小溪,那驮着夕阳缓缓独行的老牛,一方方秧田像棋盘格子,绿绒绒的秧苗,织成一幅幅地毯,远远地伸向天际;丛丛绿树掩映着青砖红瓦的房屋。春天,故乡的松树林依然郁郁苍苍,映山红却已开遍山丘。

很多前端恐怕都不了解HTML5的拖拽怎么实现吧,本文了解了下思路。进行整理备份,便于以后查阅。

先上示例:

index.html

XML/HTML Code复制内容到剪贴板
  1. <!doctypehtml>
  2. <html>
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>Drag</title>
  6. <style>
  7. .box{
  8. width:400px;
  9. height:400px;
  10. float:left;
  11. }
  12. #box1{
  13. background:#CCC;
  14. }
  15. #box2{
  16. background:#FF0;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <divid="box1"class="box"></div>
  22. <divid="box2"class="box"></div>
  23. <imgsrc="http://pica.zol-img.com.cn/2016/02/1ace90ad77db716547614a18c4a9263g.jpg"alt=""id="img1"/>
JavaScript Code复制内容到剪贴板
  1. <scriptsrc="app1.js"></script>
  2. </body>
  3. </html>
  4. app1.js
  5. /**
  6. *app1.js
  7. */
  8. varoBox1,
  9. oBox2,
  10. oImg1;
  11. window.onload=function(){
  12. oBox1=document.getElementById('box1');
  13. oBox2=document.getElementById('box2');
  14. oImg1=document.getElementById('img1');
  15. //
  16. oBox1.ondragover=oBox2.ondragover=function(e){
  17. e.preventDefault();
  18. };
  19. //
  20. oImg1.ondragstart=function(e){
  21. e.dataTransfer.setData('text',e.target.id);
  22. };
  23. oBox1.ondrop=dropImg;
  24. oBox2.ondrop=dropImg;
  25. };
  26. functiondropImg(e){
  27. e.preventDefault();
  28. vartempImg=document.getElementById(e.dataTransfer.getData('text'));
  29. e.target.appendChild(tempImg);
  30. }

涉及知识点

在拖放的过程中会触发以下事件:
在拖动目标上触发事件 (源元素)
  ondragstart - 用户开始拖动元素时触发
  ondrag - 元素正在拖动时触发
  ondragend - 用户完成元素拖动后触发

释放目标时触发的事件
  ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
  ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
  ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
  ondrop - 在一个拖动过程中,释放鼠标键时触发此事件

event对象(以e代替)

e.target

  W3Cschool上的解释是:返回触发此事件的元素(事件的目标节点),这个target属性只兼容ie9及以上

e.preventDefault()

  取消事件的默认动作。

e.dataTransfer.setData()

  设置被拖数据的数据类型和值:

复制代码
代码如下:
e.dataTransfer.setData("Text",ev.target.id); //第一个参数为Text(小写的也行)

e.dataTransfer.getData()

  获得被拖的数据:

复制代码
代码如下:
e.dataTransfer.getData("Text");

以上就是本文的全部内容,希望对大家的学习有所帮助。

原文:http://www.cnblogs.com/oovwall/p/5213580.html

您可能有感兴趣的文章
HTML标签之!DOCTYPE文档类型声明

如何使用html+css代码如何实现冰墩墩和雪容融效果

html中checkbox与radio样式美化的简单实例

div设置可编辑内容的方法

css设置placeholder的颜色样式的方法