1.首先，为了使元素可拖动，要先设置元素为可拖拽

  • 方法：添加draggable属性，设置为 true
  • 注意：链接和图像默认就支持拖拽，另外，如果一个元素中的文本被选中，那么这个元素和他的文本节点此时都支持被拖拽。
<body style="padding:30px;">

    <div class="item">

        <h3 draggable="true">我是被允许拖拽的h3元素</h3>

    </div>

    <div class="item">

        <a href="http://www.baidu.com/">a链接</a>

    </div>

    <div class="item">

        <img src="timg.jpg" alt="" width="200">

    </div>

    <div class="item">

        <h3>选中文字后可被拖拽</h3>

    </div>

</body>

<script>

    document.ondragstart = function(){

        console.log('dragstart')

    }

</script>

2.拖拽事件监听

  • 拖拽事件一律使用（推荐）document监听，拖拽事件分2种，一种针对的是被拖拽的元素，第二种针对被拖拽的元素经过的容器
事件名称 事件对象(e.target) 说明
ondrag 被拖拽的元素 元素被拖拽期间（持续）触发
ondragstart 被拖拽的元素 开始拖拽元素时触发（推荐使用它记录被拖拽的元素）
ondragend 被拖拽的元素 元素拖拽结束时触发
ondragenter 接收容器 被拖拽的元素进入当前容器范围内时触发此事件
ondragover 接收容器 被拖拽的元素停留在当前容器范围内（持续）触发此事件
ondragleave 接收容器 被拖拽的元素离开当前容器范围内时触发此事件
ondrop 接收容器 释放鼠标键时触发此事件（触发时间早于ondragend）
  • 注意：浏览器默认阻止ondrop事件，需要在ondragover事件中阻止默认事件它才能被触发

3.完整的拖拽实例

  • 哪个元素被拖拽：可以在ondragstart事件中获取被拖拽的元素，并保存，问题1解决
  • 哪个容器负责接收：实际操作中，拖拽结束时经过的容器就是接收的容器，而能在此时获得接收容器的事件只能是drop事件（而drop事件默认被屏蔽，所以需要在ondragover事件中释放此事件）
<script>

    // 设置全局变量记录被拖拽的元素

    var dragNode = null

    // 监听拖拽开始，记录被拖拽的元素

    document.ondragstart = function (e) {

        //记录被拖拽的元素

        dragNode = e.target

        // 修改通明度

        dragNode.style.opacity = 0.5

    }

    // 监听拖拽结束

    document.ondragend = function (e) {

        // 恢复透明度

        e.target.style.opacity = 1

        // 清空dragNode

        dragNode = null

    }

    // 阻止默认事件

    document.ondragover = function (e) {

        //允许被拖拉的节点放入目标节点

        e.preventDefault()

    }

    // 监听拖拽释放，获取当前容器

    document.ondrop = function (e) {

        // 获取释放时的容器

        var targetBox = e.target

        // 判断是否是目标容器

        if(targetBox.matches(".box")){

            // 将元素移动到新的容器中

            targetBox.appendChild(dragNode)

        }

    }

</script>

4.优化

  • 存在的问题：前面的案例中我们使用了一个全局变量来存储被拖拽的元素，但是使用全局变量容器污染全局
  • 解决办法：在拖拽事件中，事件对象event有一个dataTransfer属性对象，用来保存和读取拖放相关的数据
方法 说明
e.dataTransfer.setData(key,data) 设置数据（只能传入数字或者字符串）
e.dataTransfer.getData(key) 取数据（数字或者字符串）
e.dataTransfer.clearData(key) 清空数据
  • 代码实现：使用e.dataTransfer记录被拖拽元素的id属性值，从而通过这个值获取获取到被拖拽的元素
<script>

    // 监听拖拽开始，记录被拖拽的元素

    document.ondragstart = function (e) {

        //判断节点是元素节点且有id属性，没有则赋予一个id

        if(!e.target.id && e.target.nodeType === 1){

            // 如果没有id，则设置一个id

            e.target.id = "dragTest"

        }

        //保存id信息

        e.dataTransfer.setData("id",e.target.id)

        // 修改通明度

        e.target.style.opacity = 0.5

    }

    // 监听拖拽结束

    document.ondragend = function (e) {

        // 恢复透明度

        e.target.style.opacity = 1

    }

    // 阻止默认事件

    document.ondragover = function (e) {

        //允许被拖拉的节点放入目标节点

        e.preventDefault()

    }

    // 监听拖拽释放，获取当前容器

    document.ondrop = function (e) {

        // 获取释放时的容器

        var targetBox = e.target

        // 根据存储的数据获取被拖拽的元素

        var id = e.dataTransfer.getData("id")

        var dragNode = document.querySelector("#"+id)

        // 判断是否是目标容器

        if(targetBox.matches(".box")){

            // 将元素移动到新的容器中

            targetBox.appendChild(dragNode)

        }

    }

</script>

HTML5 拖拽接口的更多相关文章

  1. 从零开始学 Web 之 HTML5（四）拖拽接口，Web存储，自定义播放器

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. Html5拖拽复制

    拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...

  3. html5拖拽

    html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  4. HTML5 拖拽复制功能的实现方法

    Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head& ...

  5. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. HTML5拖拽功能中 dataTransfer对象详解

    有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...

  7. 基于html5拖拽api实现列表的拖拽排序

    基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...

  8. html5 拖拽(drag)和f放置(drop)

    知识要点 HTML5 (drag&drop) API  (Event) 拖放数据(对象):DataTransfer 拖放内容:setData getData 拖放效果(动作):dropEffe ...

  9. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  10. html5拖拽总结

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

随机推荐

  1. webpack笔记-loader的详细使用介绍（四）

    loader 基本上都是第三方类库,使用时需要安装,有一些 loader 还需要安装额外的类库,例如 less-loader 需要 less,babel-loader 需要 babel 等. load ...

  2. CSS – 实战 Color

    前言 之前 W3Schools 学习笔记 (1) 也记入过 Color, 这篇整理一下在网页开发中, 颜色是如果被处理的. 网页都有什么颜色? 网页篇幅最大的颜色, 通常是来自图片, 不管是背景图, ...

  3. EF Core – 乐观并发

    前言 之前写过 EF Core 悲观并发, 这篇主要讲一下乐观并发. 乐观并发的机制可以看这篇. Why Need This? 如果你用 EF Core 做数据管理, 建议你每个 Entity 都配置 ...

  4. 深入理解JNDI注入—RMI/LDAP攻击

    目录 前言 JNDI 注入简单理解 透过Weblogic漏洞深入理解 RMI与LDAP的区别 JNDI+RMI 漏洞代码触发链 lookup触发链 JNDI+LDAP 前言 本篇文章初衷是在研究log ...

  5. dfs 【XR-2】奇迹——洛谷5440

    问题描述: 现有一个八位数,从左往右分别代表年月日,例如20240919,代表2024年9月19日,现将该八位数蒙住几位数,问填入数字之后有几种情况是的日为质数,月+日为质数,年+月+日为质数 输入: ...

  6. template fastread

    昨天梦到一种快读,你给他传多少参,他就读多少数 今天学了折叠表达式和隐式转换,现在来把这玩意实现一下 特化函数 void read(int) 读入一个整数 void read(char&[], ...

  7. Unreal Engine4 GPU崩溃或3D设备丢失的解决方案

    起因: Unreal Engine4 在渲染时报错GPU崩溃或3D设备丢失 解决办法: regedit  打开注册表 在以下2个路径下 新建 DWORD(32-bit) Value 命名为  TdrD ...

  8. 离线安装Nginx

    离线安装nginx gcc-c++ 该链接内有安装nginx所需的环境 openssl.pcre.zlib 直接执行该命令安装即可 rpm -Uvh *.rpm --nodeps --force 将下 ...

  9. 双指针习题：Kalindrome Array

    Kalindrome Array 题目链接: Kalindrome Array - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题面翻译 对于长度为 \(m\) 的序列 \(b\), ...

  10. 立即报名 | 云原生 + AI Meetup 成都站 11.4 正式开启

    2023 年,KubeSphere 社区已经在深圳.杭州.上海三个城市各组织了一场线下 Meetup.第四站,我们将走进天府成都. 11 月 4 日,云原生 + AI Meetup 成都站将正式开启! ...