我的编程空间,编程开发者的网络收藏夹
学习永远不晚

HTML5中如何实现拖放功能

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

HTML5中如何实现拖放功能

这篇文章主要介绍了HTML5中如何实现拖放功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

一、什么是拖放

拖放就是通过鼠标放在一个物体上,按住鼠标不放就可以把一个物体托动到另一个位置。其实我们平时一直都有接触,如图

HTML5中如何实现拖放功能

那么在网页上其实也可以实现同样效果的拖放功能,如图

HTML5中如何实现拖放功能

那么,就让我们来看看如何实现的吧

二、拖放事件

在IE4的时候,Js就可以实现拖放功能了,当时只支持拖放图像和一些文本。后来随着IE版本的更新,拖放事件也在慢慢完善,HTML5就以IE的拖放功能制定了该规范,Firefox 3.5、Safari 3+、chrome以及它们之后的版本都支持了该功能。

默认情况下,网页中的图像、链接和文本是可以拖动的,而其余的元素若想要被拖动,必须将 draggable 属性设置为 true,这是HTML5规定的新属性,用于设置元素是否能被拖动。因此,图像、链接、文本的 draggable 属性默认为 true,其余元素的 draggable 属性默认为 false

在实现拖放功能时有这样两个概念,分别是被拖动元素目标元素,它们都有各自支持的事件,那么我们来了解一下

(1)被拖动元素的事件

被拖动元素所支持的事件如下表所示 

事件含义
dragstart准备拖动被拖动元素时触发
drag拖动的过程中触发(频繁触发)
dragend拖动结束时触发

我们来用一个例子测试一下这三个事件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        .box{            width: 100px;            height: 100px;            background-color: lightgreen;        }    </style></head><body>    <div  draggable='true'></div>    <script>        let box = document.querySelector('.box')        // 绑定dragstart事件        box.addEventListener('dragstart', function() {            console.log('拖拽开始了');        })        // 绑定drag事件        box.addEventListener('drag', function() {            console.log('元素被拖动');        })        // 绑定dragend事件        box.addEventListener('dragend', function() {            console.log('拖拽结束');        })    </script></body></html>

我们来看看测试效果

HTML5中如何实现拖放功能

(2)目标元素的事件

在实现拖放功能的过程中,目标元素上的事件有如下三个

 
事件含义
dragenter被拖放元素进入目标元素时触发
dragover被拖放元素在目标元素内时触发(频繁触发)
dragleave被拖动元素离开目标元素时触发
drop当被拖动元素被放到了目标元素中时触发

这里我要详细讲解一下这三个事件的触发规则:

  • dragenter事件mouseover 事件类似,那怎样才算被拖放元素进入目标元素呢?经过测试发现,当被拖放元素的一半以上面积在目标元素内才算进入了目标元素

  • dragover事件比较特殊,当拖放元素进入目标元素以后就会一直触发,就跟你设置了一个无限循环的定时器一样,即使你不移动元素也会触发,除非拖放事件结束或者被拖放元素离开目标元素

  • dragleave事件 的其触发条件正好与 dragenter 事件相反,它是当被拖放元素离开目标元素时触发,经过测试,离开目标元素的条件是:被拖放元素一半以上的面积离开目标元素

  • drop事件 可以叫做放置目标事件,它是当被拖放元素放置到了目标元素中时触发。虽然任何元素都支持该事件,但是所有元素默认都是不允许被放置的,所以在不做任何处理的情况下,该事件是不会触发的

同样的,我们来用具体的例子,先来体会一下前三个事件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        .box{            width: 100px;            height: 100px;            background-color: lightgreen;        }        .location{            width: 100px;            height: 100px;            background-color: lightpink;        }    </style></head><body>    <div  draggable='true'></div>    <div ></div>    <script>        let located = document.querySelector('.location')        // 绑定dragenter事件        located.addEventListener('dragenter', function() {            console.log('元素进入了目标元素');        })        // 绑定dragover事件        located.addEventListener('dragover', function() {            console.log('元素在目标元素内');        })        // 绑定dragleave事件        located.addEventListener('dragleave', function() {            console.log('元素离开了目标元素');        })    </script></body></html>

我们来看看测试效果,这里你们要仔细看被拖放元素多少面积进入或离开目标元素时才触发的对应事件

HTML5中如何实现拖放功能

那么最后我们再来将一下如何才能触发 drop事件,只需要阻止 dragenter事件dragover事件 的默认行为即可。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        .box{            width: 100px;            height: 100px;            background-color: lightgreen;        }        .location{            width: 100px;            height: 100px;            background-color: lightpink;        }    </style></head><body>    <div  draggable='true'></div>    <div ></div>    <script>        let located = document.querySelector('.location')        located.addEventListener('dragenter', function(e) {            e.preventDefault()        })        located.addEventListener('dragover', function(e) {            e.preventDefault()        })        located.addEventListener('drop', function() {            console.log('元素被放置');        })    </script></body></html>

来看下测试效果图

HTML5中如何实现拖放功能

值得注意的是,在我们没有对 drop事件 做处理之前,将被拖放元素拖动到目标元素中时,鼠标样式会变成禁止的样式,如图

HTML5中如何实现拖放功能

而当我们设置元素为可放置了以后,鼠标样式是这样的。如图

HTML5中如何实现拖放功能

三、dataTransfer对象

上面只是简简单单地实现了拖放功能,但并没用利用该功能做出什么实际性的功能,这里我们介绍一个拖放事件中事件对象上的一个特别重要的属性&mdash;&mdash;dataTransfer

我们通过 event.dataTransfer 来获取该对象,其主要的作用就是从被拖放元素向目标元素传递一个字符串数据

(1)方法

dataTransfer上有两个方法,如下表所示

 
方法含义
setData设置字符串,并设置数据类型
getData获取对应数据类型的字符串

setData() 方法接收两个参数,第一个参数表示的是字符串的数据类型,HTML5规定了两种数据类型,分别是 text/plaintext/uri-list,前者表示普通字符串,后者表示URL字符串;第二个参数 就是用于存放的字符串

getData() 方法只接收一个参数,即需要接收的字符串类型

我们来简单使用一下这两个方法

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        .box{            width: 100px;            height: 100px;            background-color: lightgreen;        }        .location{            width: 100px;            height: 100px;            background-color: lightpink;        }    </style></head><body>    <div  draggable='true'></div>    <div ></div>    <script>let box = document.querySelector('.box')// 为被拖放元素绑定 dragstart 事件        box.addEventListener('dragstart', function(e) {        // 设置类型为 text/plain 的 字符串            e.dataTransfer.setData('text/plain', '我是拖放开始时被设置的字符串')        })        let located = document.querySelector('.location')                located.addEventListener('dragenter', function(e) {            e.preventDefault()        })        located.addEventListener('dragover', function(e) {            e.preventDefault()        })        located.addEventListener('drop', function(e) {        // 将被拖放元素放置到目标元素时获取字符串            let res = e.dataTransfer.getData('text/plain')            console.log(res);        })    </script></body></html>

来看下测试结果

HTML5中如何实现拖放功能

(2)属性

dataTransfer对象 上还有两个比较常用的属性,如下表所示

 
属性含义
dropEffect被拖放元素的放置行为
effectAllowed目标元素支持的放置行为

首先说一下,这个两个属性需要搭配使用,它们决定了被拖放元素目标元素 之间的关系的,当设定好两者的关系后,在进行拖动操作的时候,鼠标会根据不同的关系显示不同的样式,除此之外,没有别的特别的作用。

dropEffect 可以设置以下几个属性

 
含义
none默认值。不能把拖动的元素放在这里
move应该把拖动的元素移动到该目标元素
copy应该把拖动元素复制到该目标元素
link表示目标元素会打开被拖放进来的元素对应的链接

【注意】:dropEffect 属性必须在 dragenter事件 中设置,否则无效

effectAllowed 可以设置以下几个属性

含义
uninitialized被拖放元素没有设置放置性为
none被拖放元素不能有放置性为
copy只允许值为 &lsquo;copy&rsquo; 的 dropEffect 目标元素
link只允许值为 &lsquo;link&rsquo; 的 dropEffect 目标元素
move只允许值为 &lsquo;move&rsquo; 的 dropEffect 目标元素
copyLink只允许值为 &lsquo;copy&rsquo; 和 &lsquo;link&rsquo; 的 dropEffect 目标元素
copymove只允许值为 &lsquo;copy&rsquo; 和 &lsquo;move&rsquo; 的 dropEffect 目标元素
linkMove只允许值为 &lsquo;link&rsquo; 和 &lsquo;move&rsquo; 的 dropEffect 目标元素
all只允许任意值的 dropEffect 目标元素

【注意】:effectAllowed 属性必须在 dragstart事件 中设置,否则无效

上面也说了,这两个属性基本上只是用来改变鼠标样式的,所以如果想实现特定的功能还得我们自己来重写事件的处理函数。

下面来看一个拖放实例:

需求: 将一段文本拖放到一个元素中

因为文本是默认支持的拖放元素,所以我们可以不对其做任何的事件绑定。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        .location{            width: 100px;            height: 100px;            border: 1px solid black;        }    </style></head><body>    <div class="box">我是一段测试文字</div>    <div class="location"></div>    <script>            let located = document.querySelector('.location')        located.addEventListener('dragenter', function(e) {            e.dataTransfer.dropEffect = 'copy'            e.preventDefault()        })        located.addEventListener('dragover', function(e) {            e.preventDefault()        })        located.addEventListener('drop', function(e) {            e.target.innerHTML = e.dataTransfer.getData('text/plain')        })    </script></body></html>

测试动图

HTML5中如何实现拖放功能

感谢你能够认真阅读完这篇文章,希望小编分享的“HTML5中如何实现拖放功能”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网行业资讯频道,更多相关知识等着你来学习!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

HTML5中如何实现拖放功能

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

HTML5中如何实现拖放功能

这篇文章主要介绍了HTML5中如何实现拖放功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、什么是拖放拖放就是通过鼠标放在一个物体上,按住鼠标不放就可以把一个物体托动到另
2023-06-09

HTML5中如何拖放API实现自动生成相框功能

这篇文章主要介绍了HTML5中如何拖放API实现自动生成相框功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。实现功能: 将桌面图片拖入指定地方,生成相框和相关信息。相框需要
2023-06-09

html5中如何使用js实现拖拽功能

这篇文章主要介绍了html5中如何使用js实现拖拽功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1. HTML5 拖拽1.1 相关知识拖拽元素:可以为元素添加 dragg
2023-06-09

html5如何实现放大镜功能

今天小编给大家分享一下html5如何实现放大镜功能的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。html5实现放大镜功能的方
2023-07-05

VB.NET中怎么实现拖放功能

VB.NET中怎么实现拖放功能,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。Windows用户一般分为两类:一类习惯用键盘操作,一类习惯用鼠标操作。程序员们在编程时一般会提
2023-06-17

html5如何实现拖拽

这篇文章主要介绍了html5如何实现拖拽,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。html5实现拖拽的方法:首先新建一个空的HTML5结构;然后在body元素中放置一个d
2023-06-15

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录