HTML5如何实现元素拖拽

时间:2021-05-08

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

先上示例:

index.html

XML/HTML Code复制内容到剪贴板
  • <!doctypehtml>
  • <html>
  • <head>
  • <metacharset="UTF-8">
  • <title>Drag</title>
  • <style>
  • .box{
  • width:400px;
  • height:400px;
  • float:left;
  • }
  • #box1{
  • background:#CCC;
  • }
  • #box2{
  • background:#FF0;
  • }
  • </style>
  • </head>
  • <body>
  • <divid="box1"class="box"></div>
  • <divid="box2"class="box"></div>
  • <imgsrc="http://pica.zol-img.com.cn/2016/02/1ace90ad77db716547614a18c4a9263g.jpg"alt=""id="img1"/>
  • JavaScript Code复制内容到剪贴板
  • <scriptsrc="app1.js"></script>
  • </body>
  • </html>
  • app1.js
  • /**
  • *app1.js
  • */
  • varoBox1,
  • oBox2,
  • oImg1;
  • window.onload=function(){
  • oBox1=document.getElementById('box1');
  • oBox2=document.getElementById('box2');
  • oImg1=document.getElementById('img1');
  • //
  • oBox1.ondragover=oBox2.ondragover=function(e){
  • e.preventDefault();
  • };
  • //
  • oImg1.ondragstart=function(e){
  • e.dataTransfer.setData('text',e.target.id);
  • };
  • oBox1.ondrop=dropImg;
  • oBox2.ondrop=dropImg;
  • };
  • functiondropImg(e){
  • e.preventDefault();
  • vartempImg=document.getElementById(e.dataTransfer.getData('text'));
  • e.target.appendChild(tempImg);
  • }
  • 涉及知识点

    在拖放的过程中会触发以下事件:
    在拖动目标上触发事件 (源元素)
      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

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章