前言

　　本文总结一下html5 新增的元素拖拽功能的使用。

正文

　　1、H5之前的拖拽功能实现方法

　　JS 拖 拖 拽 功 能 的 实 现首先是三个事件，分别是 mousedown，mousemove，mouseup 当鼠标点击按下的时候，需要一个 tag 标识此时已经按下，可以执行mousemove 里面的具体方法。clientX，clientY 标识的是鼠标的坐标，分别标识横坐标和纵坐标，并且我们用 offsetX 和 offsetY 来表示元素的元素的初始坐标，移动的举例应该是：鼠标移动时候的坐标-鼠标按下去时候的坐标。也就是说定位信息为：鼠标移动时候的坐标-鼠标按下去时候的坐标+元素初始情况下的 offetLeft.还有一点也是原理性的东西，也就是拖拽的同时是绝对定位，我们改变的是绝对定位条件下的 left 以及 top等等值。

　　2、H5的拖拽方法介绍

        H5中拖拽属性：draggable： auto | true | false
        拖动事件：
        - dragstart 在元素开始被拖动时触发
        - dragend 在拖动操作完成时触发
        - drag 在元素被拖动时触发
        释放事件：
        - dragenter 被拖动元素进入到释放区所占据得屏幕空间时触发
        - dragover 当被拖动元素在释放区内移动时触发
        - dragleave 当被拖动元素没有放下就离开释放区时触发
        - drop 当被拖动元素在释放区里放下时触发

（1）将元素设置为可以拖动

        draggable="true"

（2）拖动什么 - ondragstart 和 setData()

        ondragstart="drag(event)"设置拖放触发的函数
        event.dataTransfer.setData("Text",event.target.id);设置拖放的数据类型和值，Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id ("drag1")。

（3）放到何处 - ondragover

        该时间规定拖动元素放置在何处，默认无法将数据/元素放置在其他元素中，如果需要设置允许放置，必须阻止对元素的默认处理方式ev.preventDefault();

（4）进行放置 - ondrop

        调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
        通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
        被拖数据是被拖元素的 id ("drag1")
        把被拖元素追加到放置元素（目标元素）中

　　3、使用拖拽实现小功能

<style>

    .wrap {

      width: 300px;

      margin: 0 auto;

      display: flex;

      flex-direction: row;

      justify-content: space-between;

    }

    .wrap1 {

      width: 100px;

      height: 310px;

      border: 1px solid red;

    }

    .wrap1:hover {

      box-shadow: 4px 4px 5px 3px #999;

    }

    .wrap2 {

      width: 100px;

      height: 310px;

      border: 1px solid red;

    }

    .wrap2:hover {

      box-shadow: 4px 4px 5px 3px #999;

    }

    img {

      width: 100px;

      height: 100px;

      cursor: move;

    }

    img:hover {

      box-shadow: 4px 4px 5px 3px #999;

    }

  </style>

<body>

  <div class="wrap">

    <div class="wrap1" ondragover="dragOver(event)" ondrop="drop(event,this)">

      <img src="./img/feiji1.png" draggable="true" ondragstart="dragStart(event)" id="drag1" />

      <img src="./img/feiji3.png" draggable="true" ondragstart="dragStart(event)" id="drag3" />

    </div>

    <div id="wrap2" class="wrap2" ondragenter="dragEnter(event)" ondragover="dragOver(event)" ondrop="drop(event,this)">

      <img src="./img/feiji2.png" draggable="true" ondragstart="dragStart(event)" id="drag2" />

    </div>

  </div>

  <script>

    var dragOffSetY;// 鼠标点击下的位置相对于选择元素的y轴长度

    function dragStart(event) {

      // 设置拖放的数据类型和值

      console.log("event.offsetY", event.offsetY);

      dragOffSetY = event.offsetY

      event.dataTransfer.setData("Text", event.target.id);

    }

    function dragOver(event) {

      event.preventDefault();

    }

    function dragEnter(event) { }

    function drop(event, thisEle) {

      event.preventDefault();

      var data = event.dataTransfer.getData("Text");

      if (thisEle.children.length * 100 - 50 > event.offsetY - dragOffSetY) {

        console.log("插入");

        // 判断覆盖元素的前半部分

        console.log("event.offsetY - dragOffSetY", event.offsetY, dragOffSetY);

        var offY = event.offsetY - dragOffSetY// 拖拽元素的起点位置

        console.log("拖拽元素的起点位置", offY);

        var count = Math.round(offY / 100)// 当前拖拽元素覆盖在的元素为第几个

        console.log("当前覆盖元素", thisEle.children[count]);

        // 前部分

        if (count * 100 + 50 > offY) {

          thisEle.insertBefore(document.getElementById(data), thisEle.children[count]);

        } else {

          thisEle.insertBefore(document.getElementById(data), thisEle.children[count + 1]);

        }

      } else {

        console.log("追加");

        event.target.appendChild(document.getElementById(data));

      }

    }

  </script>

　　运行结果如下：

写在最后

　　以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。

html-拖拽释放(Drag and drop) API的更多相关文章

  1. （原创）[C#] 一步一步自定义拖拽（Drag&Drop）时的鼠标效果：（一）基本原理及基本实现

    一.前言 拖拽(Drag&Drop),属于是极其常用的基础功能. 无论是在系统上.应用上.还是在网页上,拖拽随处可见.同时拖拽时的鼠标效果也很漂亮,像这样: 这样: 还有这样: 等等等等. 这 ...

  2. [Unity]背包效果-使用NGUI实现物品的拖拽效果Drag

    背包效果-使用NGUI实现物品的拖拽效果Drag 效果实现如图 对象层级关系图 PacketCell - Right 对象作为单元格背景 PacketContainer 对象作为单元格容器 Packe ...

  3. HTML5原生拖拽/拖放⎡Drag & Drop⎦详解

    前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

  4. HTML5原生拖拽/拖放(drag & drop)详解

    前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

  5. HTML5拖拽/拖放(drag & drop)详解

    H5中拖拽属性: draggable: auto | true | false   拖动事件:   - dragstart 在元素开始被拖动时触发 - dragend 在拖动操作完成时触发 - dra ...

  6. HTML5拖拽功能drag

    1.创建拖拽对象 给需要拖拽的元素设置draggable属性,它有三个值: true:元素可以被拖拽:false:元素不能被拖拽:auto: 浏览器自己判断元素是否能被拖拽. 2.处理拖拽事件当我们拖 ...

  7. D3.js 力导向图的拖拽（drag）与缩放（zoom）

    不知道大家会不会跟我一样遇到这样的问题,在之前做的力导向图的基础上加上缩放功能的时候,拖动节点时整体会平移不再是之前酷炫的效果(失去了拉扯的感觉!).天啊,简直不能接受如此丑X的效果.经过不懈的努力终 ...

  8. 【WPF】鼠标拖拽功能DragOver和Drop

    在Winform里面实现拖入功能只要设置控件AllowDrop=true; 然后实现方法 //拖入 private void txtInputPath_DragOver(object sender, ...

  9. html5拖拽总结

    拖拽(Drag 和 drop)是 HTML5 标准的组成部分.拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. Internet Explorer 9.Firefox.Opera 12.Chrom ...

随机推荐

  1. 网络协议学习笔记(八)DNS协议和HttpDNS协议

    概述 上一篇主要讲解了流媒体协议和p2p协议,现在我给大家讲解一下关于DNS和HttpDNS的相关知识. DNS协议:网络世界的地址簿 在网络世界,也是这样的.你肯定记得住网站的名称,但是很难记住网站 ...

  2. linux服务器之间传输文件的四种方式

    linux文件传输在内网渗透中至关重要,所以我在此总结一下几种Linux服务器之间传输文件的四种方式 1. scp [优点]简单方便,安全可靠:支持限速参数[缺点]不支持排除目录[用法]scp就是se ...

  3. 你的Kubernetes Java应用优雅停机了吗？

    Java 应用优雅停机 我们首先考虑下,一般在什么场景下数据会丢失呢? 升级服务时 pod重启时 服务器断电时 因为服务器断电属于极端情况,我们暂且不考虑.那就只有 Java 退出时我们要保证数据的完 ...

  4. 关于Jmeter线程数Ramp-Up.循环次数的理解和实验数据

    1. 关于线程组参数 线程组:即一个线程组实例里面包括多个串行的请求或动作.一个线程组的从启动到结束的时间取决于你线程中的步骤数量. 线程数:即用户数,在Ramp-up时间内(包括循环),简单把线程数 ...

  5. JSON串、JSON对象、Java对象的相互转换

    对象类型转换2: com.alibaba.fastjson.JSONObject时经常会用到它的转换方法,包括Java对象转成JSON串.JSON对象,JSON串转成java对象.JSON对象,JSO ...

  6. 【记录一个问题】thanos receiver在tsdb切换期间，导致remote write接口失败增加

    如图:配置了thanos receiver落盘的时间周期为10分钟,结果导致在切换tsdb期间,remote write接口的失败率增高. 目前看来,解决办法就是上游增加重试.

  7. 什么是Filter过滤器

    一,什么是Filter过滤器: JavaWeb三大组件之一 Filter过滤器是JavaEE的规范.也就是接口 Filter过滤器作用:拦截请求,过滤响应 拦截请求常见的应用场景有: 1,权限检查 2 ...

  8. AWS 模拟题知识点总结！

    一 题库的地址 https://www.lleicloud.com/index.php/aws-certified-saa-c01-practice-questions-c6-01/ 二 总结的知识点 ...

  9. ByteArrayOutputStream内存流

    简介 ByteArrayOutputStream 对byte类型数据进行写入的类 相当于一个中间缓冲层,创建ByteArrayOutputStream类实例时,内存中会创建一个byte数组类型的缓冲区 ...

  10. JAVA多线程学习五：线程范围内共享变量&ThreadLocal

    一.概念 可以将每个线程用到的数据与对应的线程号存放到一个map集合中,使用数据时从这个集合中根据线程号获取对应线程的数据,就可以实现线程范围内共享相同的变量. 二.代码 Runnable中的run( ...