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. Figma 学习笔记 – Text

    结构 Figma 的字都会有一个 wrapper 控制 width. 虽然它是看不见的. 但是你要知道它有那个概念存在. 按 T 键, 然后鼠标点击或拉就可以做出一个 text 了. 基本配置 我顺着 ...

  2. Unity中的三种渲染路径

    Unity中的渲染路径 Unity的渲染路径 在Unity里,渲染路径(Rendering Path)决定了光照是如何应用到Unity Shader中的.因此,我们只有为Shader正确地选择和设置了 ...

  3. 全面掌握 Jest：从零开始的测试指南（下篇）

    在上一篇测试指南中,我们介绍了Jest 的背景.如何初始化项目.常用的匹配器语法以及钩子函数的使用.这一篇篇将继续深入探讨 Jest 的高级特性,包括 Mock 函数.异步请求的处理.Mock 请求的 ...

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

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

  5. LeetCode 218. 天际线问题 （扫描线+优先队列）

    扫描线+优先队列 https://leetcode-cn.com/problems/the-skyline-problem/solution/tian-ji-xian-wen-ti-by-leetco ...

  6. 16 模块time、datetime、random、hashlib、logging

    1. 时间模块time.datetime 在python中,表示时间有三种方式:时间戳 格式化的时间字符串(Format String): '2022-03-01' 时间元组(struct_time) ...

  7. foobar2000 v2.1.6 汉化版

    foobar2000 v2.1.6 汉化版 -----------------------[软件截图]---------------------- -----------------------[软件 ...

  8. vue3中的vue-18n的table表格标题不动态变化中英文

    使用 computed 即可 eg: const columns = computed(() => { return reactive<any>([ { title: proxy.$ ...

  9. KubeSphere 在直播应用中的实践

    本文是上海站 Meetup 讲师唐明根据其分享内容整理的文章. 引言 目前媒体的主流传播渠道已从传统的报纸.广播.电视转向了互联网,各种视频及社交 App 成为了人们获取资讯的首选途径.苏州市广播电视 ...

  10. JDK1.7中关于AutoCloseable接口的使用

    1.查看API文档,找到AutoCloseable相关定义 public interface AutoCloseable 该接口是从JDK1.7开始引入,并且该接口中只有一个方法close() 1 v ...