HTML5 拖放Drag和drop用法以及事件介绍

dragstart：拖拽开始时在被拖拽元素上触发此事件
drag：拖拽过程中被拖拽的元素会持续不断地发drag事件。
dragend：鼠标在拖放目标上释放时，在拖搜元素上触发，将元素从浏览器拖放到操作系统时不会触发此事件。

dragenter：拖拽鼠标进入元素时在该元素上触发，用于给拖放元素设置视觉反馈，如高亮
dragover：拖拽时鼠标在目标元素上移动时触发
dragleave：拖拽时鼠标移出目标元素时在目标元素上触发
drop：当拖拽元素在目标元素上同时鼠标放开时触发事件息标在拖放目标上释放时在拖放目标上触发此时监听器需要收集数据并且执行所需操作。如果是从操作系统拖放文件到浏览器，需要取消浏览器默认行为。

下面是举例：

测试各个元素的拖拽使用，观察如何执行

<div><img src="./爱宠.webp" alt="" draggable="true"></div>
<span></span>
<script>const imgs = document.querySelector('img')const spans = document.querySelector('span')// 拖拽的元素imgs.addEventListener('dragstart',dragstart)function dragstart(){console.log(`dragstart 执行了~`);}imgs.addEventListener('drag',drag)function drag(){console.log('drag 执行了')}imgs.addEventListener('dragend',dragend)function dragend(){console.log('dragend 执行了')}
</script>

下面是一个小例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;box-sizing: border-box;}html,body{height: 100%;}body {background-color: lightblue;display: flex;justify-content: center;align-items: center;}.container {width: 200px;height: 200px;border: 8px solid;margin-left: 20px;}.content {width: 184px;/* width: 100px; */height: 184px;/* height: 100px; */background: url(./flower.jpg) center/cover;}.hide {display: none;}.active {border: 8px dashed #ccc;background-color: lightgoldenrodyellow;}</style>
</head>
<body><div class="container"><div class="content" draggable="true"></div></div><div class="container"></div><div class="container"></div><div class="container"></div><div class="container"></div><script>//拖拽的元素const content = document.querySelector('.content')content.addEventListener('dragstart', dragstart)function dragstart(){setTimeout(() =>{  //setTimeout可以让元素不要消失得这么快this.classList.add('hide')  //当拖拽开始时隐藏该元素})}content.addEventListener('dragend',dragend)function dragend(){this.classList.remove('hide')  //当拖拽结束时显示该元素}//目标元素const container = document.querySelectorAll('.container')container.forEach((item)=>{  item.addEventListener('dragleave',dragleave)item.addEventListener('dragenter',dragenter)item.addEventListener('dragover',dragover)item.addEventListener('drop',drop)})function dragleave() {this.classList.remove('active')  //当元素移出该区域时，取消高亮}function dragenter() {this.classList.add('active')  //当元素移动到该区域上时高亮显示}//drop事件要和dragover事件一起使用才有效果，注意阻止事件function dragover(e){e.preventDefault();}function drop(e){  //当拖拽元素在目标元素上同时鼠标放开时，需要将拖拽元素放到这个容器中e.preventDefault();this.append(content) //将拖拽元素放到这个容器中}</script>
</body>
</html>

效果如下：

初始时：

拖拽时：

松开时：

以上案例仅供参考

HTML5 拖放Drag和drop用法以及事件介绍相关推荐

html拖放数据库字段,利用HTML5拖放(Drag 和 Drop)实现Table间数据的交互
前言作为开发者,我们总是会不经意间的遇到一些令人头疼的需求.比如五彩斑斓的黑,根据手机壳变换APP的颜色等等,你说怎么办.虽然在一般情况下不会这么棘手,但是有些需求刚拿到的时候还是会一筹莫展. 表格 ...
html5 drag this,HTML5拖放(drag和drog)
拖放(drag和drog)是HTML5的标准的组成部分,也是种常见的特性,意义为抓起一个元素放入到另外的一个位置,在HTML5中任何元素都可以被拖放,前题是要相关进行设置. 1.设置元素为可拖放,也就 ...
html5css3菜鸟教程,HTML5+CSS3实现拖放(Drag and Drop)示例
本文简单介绍一下HTML5的拖放实现.MXGHTML5中文学习网 - HTML5先行者学习网拖放(Drag 和 drop)是 HTML5 标准的组成部分.MXGHTML5中文学习网 - HTML5先 ...
html组态图动态拖拽,基于HTML5的Drag and Drop生成图片Base64信息
HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag ...
基于html5拖(drag)放(drop)实现换装小游戏
编码环境:asp.net mvc3 html5 运行环境:firefox浏览器通过. 一:有关html5的拖放功能,网上介绍的一大把,我将自己学习到的知识点总结如下: 1:全局属性draggable ...
H5 拖放drag跟drop
H5的拖放功能主要是通过drag和drop来实现的,目前IE9.Firefox.Opera 12.Chrome 以及 Safari 5 是支持拖放的,Safari 5.1.2 中不支持拖放.下面先放一 ...
[Ext JS 4] 拖放[drag and drop]
定义拖放一个拖动操作,就是在某个页面元素上按下鼠标并移动.一个放下操作,就是在拖动动作之后放开鼠标.可以从下图来看: Ext JS 的Ext.dd 类中定义了基本的拖放操作. 拖放类的组织所有的拖 ...
拖放(Drag和Drop)--html5
拖放,就是抓取一个对象后拖放到另一个位置.很常用的一个功能,在还没有html5的时候,我们实现这个功能,通常会用大量的js代码,再利用mousemove,mouseup等鼠标事件来实现,总的来说比较麻 ...
Qt拖放 drag and drop
拖放提供一个应用程序之间传递信息的一种简单的可视化机制.拖放机制类似于剪切和粘贴机制.拖放操作同时被QT项目视图和图形视图框架支持. QApplication提供了两个拖放相关的方法: 1. QApp ...

HTML5 拖放Drag和drop用法以及事件介绍

HTML5 拖放Drag和drop用法以及事件介绍相关推荐

最新文章

热门文章