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. 前端微服务qiankun 2.x主子应用通信代码片段

    主应用代码 主应用工程里面源代码新建qiankun/index.js,通信代码如下: import { initGlobalState } from "qiankun"; impo ...

  2. MySQL 切换 Oracle 问题整理

    MySQL 通常小写,Oracle 默认大写 ,查询过程中需加双引号,或者直接将MySQL 字段转换成大写 Springboot 配置 oracle连接 spring: datasource: url ...

  3. MySQL下载安装教程

    下载 https://www.mysql.com/downloads/

  4. 010 Python 重中之重的变量

    #!/usr/bin/env python # -*- coding:utf-8 -*- # Datatime:2022/7/16 20:32 # Filename:010 Python 重中之重的变 ...

  5. KubeSphere 社区双周报 | OpenFunction 发布 v1.1.1 | 2023.6.9-6.22

    KubeSphere 社区双周报主要整理展示新增的贡献者名单和证书.新增的讲师证书以及两周内提交过 commit 的贡献者,并对近期重要的 PR 进行解析,同时还包含了线上/线下活动和布道推广等一系列 ...

  6. Machine Learning Week_1 Introduction 5-8

    目录 1.5 Vedio: Supervised Learning unfamiliar words 1.6 Reading: Supervised Learning unfamiliar words ...

  7. Machine Learning Week_1 Welcome

    目录 0 Welcome 0.1 Video: Welcome to Machine Learning! Transcript unfamiliar words 0.2 Reading: Machin ...

  8. C++ 迪利克雷（Dirichlet）分布

    遇到一个要使用 dirichlet 分布的情形,发现 C++ 标准库中没有现成的.查阅维基百科发现,虽然它挺复杂,但是它跟 Gamma 分布有如下关系: 设有 K 个相互独立且分别满足 Gamma 分 ...

  9. 2024年网鼎杯青龙组 pwn

    pwn2 开局泄露栈地址,又是栈溢出,直接栈转移拿下 from pwn import * from LibcSearcher import LibcSearcher #from Crypto.Util ...

  10. 使用wxpython开发跨平台桌面应用，常用窗体布局BoxSizer，FlexGridSizer,GridBagSizer的介绍处理

    我们在开发桌面应用的时候,不管是之前C#开发Winform的时候,还是现在使用wxpython来开发跨平台应用的时候,都需要了解布局的处理,wxpython的常用布局Sizer类,包括BoxSizer ...