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. 【论文解读】RLAIF基于人工智能反馈的强化学习

    [论文解读]RLAIF基于人工智能反馈的强化学习 一.简要介绍 人类反馈强化学习(RLHF)可以有效地将大型语言模型(LLM)与人类偏好对齐,但收集高质量的人类偏好标签是一个关键瓶颈.论文进行了一场R ...

  2. docker安装运行kafka单机版

    这里我们安装一下kafka的单机版,由于kafka是基于zk进行管理的,如果我们没有安装过zk的话,需要进行安装好zk再安装kafka,当然如果已经安装过了, 那就没必要安装了.我们可以执行docke ...

  3. 利用3Dnii标签文件，生成png图片

    为了便于直观的看到2D标签,通常会将其转化为png图像,具体代码如下: # coding:utf-8 from glob import glob import os import SimpleITK ...

  4. 反射获取Exception的所有类

    var test = "test"; $"{test} 喜喜".Dump(); // 反射 var types = Assembly .GetAssembly( ...

  5. 开源的口袋妖怪自走棋「GitHub 热点速览」

    作为一名 90 后,我对口袋妖怪(宝可梦)游戏有着特殊的感情,满满的都是回忆.如果你也喜欢宝可梦主题的游戏,这款开源的宝可梦自走棋游戏 pokemonAutoChess 一定要试试,它采用战棋(自走棋 ...

  6. CSP模拟 小 trick 总结 （持续施工中）

    虽然这篇博客来的有点晚,但还是写了,欢迎dalao补充( (很杂,建议先浏览目录) 1.分块.莫队有关: \(\color{brown}(1)一个真正的回滚莫队(感谢\ Qyun\ 的讲解):\) $ ...

  7. 如何使用 VuePress 搭建博客网站并 Vercel 部署

    先来看一下网站截图: 快速上手 1.创建并进入一个新目录 mkdir vuepress-starter && cd vuepress-starter 2.使用你喜欢的包管理器进行初始化 ...

  8. 自学PHP笔记(四) PHP变量和常量

    PHP中变量有普通变量.可变变量和预定义变量,而常量就是普通变量和预定义变量. 1. 变量 在PHP中变量是内存中得一个命名单元,在系统中为程序中每个变量都分配一个存储单元,在这些存储单元中可以存储任 ...

  9. css动画效果（边框流光闪烁阴影效果）

    1.整体效果 https://mmbiz.qpic.cn/sz_mmbiz_gif/EGZdlrTDJa7odDQYuaatklJUMc5anU10PWLAt14rNnNUD6oHJG9U63fc0y ...

  10. 4年经验来面试20K的测试岗，连基础都不会，还不如招应届生。

    公司前段时间缺人,也面了不少测试,结果竟然没有一个合适的.一开始瞄准的就是中级的水准,也没指望来大牛,提供的薪资在10-20k,面试的人很多,但平均水平很让人失望.看简历很多都是3.4年工作经验,但面 ...