HTML5 drag拖放事件

最新推荐文章于 2024-01-16 23:17:40 发布
最新推荐文章于 2024-01-16 23:17:40 发布
阅读量209 收藏
点赞数
分类专栏： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42687001/article/details/104611225
版权

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发
darg： 事件主体是被拖放元素，在正在拖放被拖放元素时触发
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发
dragover：事件主体是目标元素，在被拖放元素在某元素内移动时触发
dragleave：事件主体是目标元素，在被拖放元素移出目标元素时触发
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发

飞鸟玩具
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解HTML5中的拖放事件（Drag 和 drop）
09-27
大家都知道拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。拖放是在“拖放源（drag source）”和...下面这篇文章给大家详细介绍了HTML5中的拖放事件。
DOM drag 事件
雾里看花叹朦胧
03-08 3694
拖拉（drag）指的是，用户在某个对象上按下鼠标键不放，拖动它到另一个位置，然后释放鼠标键，将该对象放在那里。 拖拉的对象有好几种，包括元素节点、图片、链接、选中的文字等等。在网页中，除了元素节点默认不可以拖拉，其他（图片、链接、选中的文字）都是可以直接拖拉的。为了让元素节点可拖拉，可以将该节点的draggable属性设为true。 <div draggable="true"> 此...
drag事件，html5新特性
weixin_46567428的博客
03-17 449
drag事件，html5新特性 拖放 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。 在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。 drag事件的使用 1.将元素设置为可拖放 将属性draggable设置为true draggable="true" 2.拖动的是什么 在元素拖放的过程中会发生什么？ 其实拖动的是元素的数据 通过 event.dataTransfer.setData()方法可以设置拖动的数据类型和值 function drag(e) { e.dataTransfer
drag事件
qq_41562817的博客
12-04 570
参考： https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/dragover_event。5、dragover事件：容器监听到有源一直在时持续触发。1、dragstart事件：源被认定开始拖拽的时候触发。4、dragenter事件：容器监听到有源进入时触发。6、dragleave事件：容器监听到有源离开时触发。2、drag事件：源在被拖拽的时候持续触发。7、drop事件：容器监听到有源降落时触发。
26(拖放事件)drag事件1
最新发布
q506174602的博客
01-16 341
26(拖放事件)drag事件1
HTML5 拖放（Drag 和 Drop）html排序拖拽案例，vue仿照element穿梭框拖拽案例。
qq_54753561的博客
05-11 2303
HTML5 拖放（Drag 和 Drop）html排序拖拽案例，vue仿照element穿梭框拖拽案例。
vue 中基于html5 drag drap的拖放效果案例分析
10-17
本文通过三个案例给大家介绍了vue 中基于html5 drag drap的拖放效果 ,需要的朋友可以参考下
HTML5元素拖拽drag与拖放drop相关API
01-27
其实HTML5就是新增一些有用的API让我们更轻松的开发从而把更多精力都放在业务逻辑上来这些API的使用也非常简单不过我的记性不太好所以还是以博客的形式记录下来（手动滑稽）今天就来写一下这个拖拽API说起拖放，其实...
HTML5 拖放（Drag 和 Drop）详解与实例代码
09-27
本篇文章主要介绍了HTML5 拖放（Drag 和 Drop）详解与实例代码，具有一定的参考价值，有兴趣的可以了解一下
Js学习之拖拉事件(drag)
热门推荐
开发猫
05-12 1万+
拖拉（drag）指的是，用户在某个对象上按下鼠标键不放，拖动它到另一个位置，然后释放鼠标键，将该对象放在那里。 拖拉的对象有好几种，包括元素节点、图片、链接、选中的文字等等。在网页中，除了元素节点默认不可以拖拉，其他（图片、链接、选中的文字）都是可以直接拖拉的。为了让元素节点可拖拉，可以将该节点的draggable属性设为true。 <div draggable="true"&g...
H5拖拽的七个事件
zhangjing1019的博客
09-09 832
一、拖拽元素事件（拖拽源） ondragstart 拖拽开始事件，只能在这个事件的过程中支持dataTransfer通过setData来设置数据。 ondrag 拖动过程中持续发生的事件。鼠标移动的过程中会反复的调用此事件。 ondragend 拖拽结束事件，鼠标放开时触发，在拖动源中触发，适合清空拖动过程的状态。 二、拖拽的目标元素事件 ondragenter 元素被拖拽入目标元素时触发...
html绑定drag事件,HTML-Drag事件(拖拽)
weixin_42516830的博客
06-09 202
拖拽body {padding: 0;margin: 0;background-color: #F7F7F7;position: relative;}.box {width: 150px;height: 150px;background-color: yellow;position: absolute;top: 100px;left: 50px;}.container {width: 300px;...
html 拖拽事件详解
qq_42880714的博客
01-31 2847
html拖拽事件详解
JavaScript使用drag事件
u014572617的博客
08-04 627
前言 复习JS时突然想到drag事件，便想尝试。 开始我的代码是这样 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .dragger { width: 100px; height: 100px; line-height: 100px; text-align: center;
Html新增属性之拖拽（drag）
qq_40137978的博客
03-09 2559
darg
原生JS的drag事件实现元素拖拽的bug
weixin_51116314的博客
01-11 2079
项目场景： 最近做Uniapp项目，从服务器请求json数据时，console.log打印出的对象中有部分数据字段缺失 问题描述： 这是服务器的数据，总共包含六个字段 这个是控制台打印出的结果，少两个字段不说，连sex字段都错了 下面是代码：下拉刷新请求网络数据，而两个url都是一样（我直接复制的） onPullDownRefresh() { uni.request({ url:this.url, success:(res)=> { console.log(re
html drag 例子,html drag拖拽事件
weixin_31309557的博客
06-05 409
在html中，事件的处理都是在js中完成的，html,js和css是密不可分的。下面就是在js中处理拖拽事件的例子。拖拽事件分两大块，一块是对拖拽的目标上的处理(即拖动目标)；一块是对拖拽到的目标上的处理(即释放目标)。在拖动目标上触发事件 (源元素):ondragstart - 用户开始拖动元素时触发ondrag - 元素正在拖动时触发ondragend - 用户完成元素拖动后触发释放目标时触发...
html5 drag api
weixin_45221036的博客
07-28 2428
html5 drag api 参考： html5的拖拽dragAPI（如果看了API不懂，看看那三个案例就会恍然大悟） html5 drag api详解 drag - Web API 接口参考 | MDN 1】拖拽和释放定义 拖拽：Drag 释放：Drop 2】源对象和目标对象 3】相关API dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。 darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。 dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
HTML5知识笔记
JiangyeMx的博客
02-21 453
目录 一，新增属性 二，新增标签 一，新增属性 input标签新增的type属性： 1， clander类（时间类，包括date time week但是兼容性都不太好 2，color 颜色选择器 placehoder属性： input的提示消息 coutenteditable属性： 可以让用户直接修改标签内的valve；可继承；默认值为false（即不可修改）；...
HTML 5拖放实例
06-02
好的，以下是一个简单的HTML 5拖放实例： ```html <!DOCTYPE html> <html> <head> <title>HTML 5拖放实例</title> <style> #div1 { width: 200px; height: 200px; padding: 10px; border: 1px solid black; } </style> <script> function allowDrop(event) { event.preventDefault(); } function drag(event) { event.dataTransfer.setData("text", event.target.id); } function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("text"); event.target.appendChild(document.getElementById(data)); } </script> </head> <body> <h2>拖动这个文本框到方框中</h2> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <input type="text" id="drag1" draggable="true" ondragstart="drag(event)"> </body> </html> ``` 在这个实例中，我们创建了一个文本框和一个方框，文本框可以被拖动到方框中。实现这个功能的关键是使用了HTML 5的拖放事件，包括`ondragstart`、`ondragover`和`ondrop`事件。 当我们开始拖动文本框时，会触发`ondragstart`事件，这个事件中我们使用了`event.dataTransfer.setData()`方法设置了数据类型和数据内容。在这个例子中，我们将数据类型设为"text"，数据内容为文本框的id。 当我们将文本框拖动到方框上时，会触发`ondragover`事件。在这个事件中，我们使用了`event.preventDefault()`方法来防止默认的操作（例如在浏览器中打开被拖动的元素）发生。 当我们在方框中放下文本框时，会触发`ondrop`事件。在这个事件中，我们使用了`event.preventDefault()`方法来防止默认的操作（例如在浏览器中打开被拖动的元素）发生。然后，我们使用`event.dataTransfer.getData()`方法获取了被拖动元素的id，并将其添加到方框中。 这个实例只是一个简单的演示，但是HTML 5的拖放功能非常强大，可以在实际的应用中发挥很大的作用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值