HTML5 拖放事件与dataTransfer对象 ---- 2021/07/19

最新推荐文章于 2024-06-12 23:23:23 发布
最新推荐文章于 2024-06-12 23:23:23 发布
阅读量172 收藏
点赞数
分类专栏： 学习随笔
原文链接：https://blog.csdn.net/hjc256/article/details/89021483
版权

参考文章：【HTML5–拖放事件与dataTransfer对象】

拖放事件

拖放的过程中被拖放的对象被称为源对象
拖放过程中经过的其他对象被称为过程对象
最终到达的对象被称为目标对象

  • 源对象
    • dragstart： 源对象开始拖放，开始移动时事件触发
    • drag： 源对象拖放过程中，移动被拖拽对象时触发
    • dragend: 源对象拖放结束，整个拖放操作结束时触发
  • 过程对象
    • dragenter ： 源对象进入过程对象范围内，被拖拽对象进入过程对象时被触发
    • dragover： 源对象在过程对象范围内移动时触发
    • dragleave： 源对象离开过程对象的范围，被拖拽对象离开目标对象时触发
  • 目标对象
    • drop： 源对象拖放到目标对象，目标对象完全接受被拖拽对象时触发，可理解为在目标对象内松手时触发
Mr.Plum
关注
专栏目录
HTML5--拖放事件与dataTransfer对象
Meskjei的博客
04-04 1万+
文章目录简介拖放事件dataTransfer对象方法例子 简介 若不使用HTML5的拖放事件，我们仍可以通过mousedown、mousemove、mouseup这三个事件来实现页面元素被鼠标拖拽的效果。 然而这样实现的拖拽仅仅是交互上的，即只是显示上的变化，并没有什么实质性的功能。而HTML5中直接提供了拖放的API，只要通过监听元素的拖放事件就能实现各种拖放功能。 若要拖放某个元素，则必须将其...
Datatransfer
10-25
Datatransfer
datatransfer
04-18
这是一个便捷的数据格式转换工具，可以实现eoo,mif,txt,dxf,vct,shp,nsi,fml,arc等多种格式文件的转换
Data Transfer
我的SAP空间
01-22 269
The entire process of transfer of data from external systems to SAP Systems. Data transfer consists of the part steps extraction, conversion and loading.－－－－－－－－－－－－－－－－－－－－－－分隔线上面是 SAP 标准文档中提供的说明分隔
JS实现拖放效果，dataTransfer对象实现拖放效果
03-26
dataTransfer对象用于从被拖动元素向放置目标传递字符串数据。因为这个对象是 event 的属性，所以在拖放事件的事件处理程序外部无法访问 dataTransfer。在事件处理程序内部，可以使用这个对象的属性和方法实现拖放...
HTML5应用开发技术-拖放元素.pptx
03-03
总结起来，HTML5的拖放功能通过`ondragstart`、`ondragover`、`ondrop`等事件以及`dataTransfer`对象，使得开发者能够构建出丰富的交互式应用，让用户可以直接在网页上进行拖放操作，比如移动图片到指定位置，从而...
HTML5应用开发技术-拖放概述.pptx
03-03
在这个事件中，可以读取`event.dataTransfer`对象来获取拖动时携带的数据，并进行处理，如将拖动元素添加到投放区。 下面是一个简单的HTML5拖放案例的代码实现： ```html 拖动我</div> 投放区</div> window....
基于HTML5 拖拽接口(Drag and drag-and-drop interfaces based on HTML5
02-12
1. `DataTransfer` 对象：这是拖放过程中存储数据的核心对象。它包含了拖动期间的所有信息，如拖动的数据、剪贴板操作以及拖动效果。例如，开发者可以通过 `setData()` 方法设置拖动数据，`getData()` 方法读取数据...
HTML5拖放API实现拖放排序的实例代码
09-27
在实现拖放排序的实例代码中，我们首先需要了解拖放API中的几个基本概念，包括draggable属性、拖放事件以及dataTransfer对象。 首先，为了使一个元素可以被拖放，我们需要设置该元素的draggable属性为true。这个...
datatransfer:小脚本将数据从本地传输到服务器（Chimichurri，Neo，Jean Zay）
03-09
datatransfer:小脚本将数据从本地传输到服务器（Chimichurri，Neo，Jean Zay）
DataTransfer(setData()方法)
jasojfosijfoids的博客
02-04 9095
先来看看 官方的解释 DataTransfer对象专门用来存储拖放时要携带的数据，它可以被设置为拖放事件对象的DataTransfer属性。—把拖动的数据存入其中 setData有两个参数： 1.第一个参数为携带数据的数据种类的字符串，只能填入类 似“text/plain”或“textml”的表示 MIME类型的文字 2.第二个参数为要携带的数据 目标元素使用getData（）方法 (1).目标元素接受到被拖放的元素后，执行getData()方法从DataTransfer里获取数据 (2).getD
HTML5之dataTransfer
sumtre_w的博客
08-27 1249
HTML5拖拽–dataTransfer 原生js也可以写拖拽，但是有两点限制：一是不能跨浏览器进行，二是代码繁杂冗余。html5就完美地避开了这两点限制，但是也不是没有缺点，兼容性就没有原生js那么好了。当然，如果不考虑ie，这简直是完美了。 drag兼容性 拖拽条件 实现拖拽需要完成以下两点 1、在拖拽元素上设置**属性：dragable dragbale的值有三种：true（可拖拽）、false（不可拖拽）、none（随浏览器处理） 2、设置相关事件 拖拽对象： 1.dragstart：按下鼠标时
html5 datatransfer,HTML5讲解之dataTransfer对象
weixin_39847437的博客
07-10 208
[导读] HTML5拖拽的数据传输　　虽然通过dragstart、drag和dragend事件实现了原生拖拽。但是这仅仅是拖拽，在IE6和IE7中还是有些拖拽问题，并且也没有实现数据的交换。为了实现数据的交换，IE5引入了dataTransfer对象。HTML5拖拽的数据传输虽然通过dragstart、drag和dragend事件实现了原生拖拽。但是这仅仅是拖拽，在IE6和IE7中还是有些拖拽问题...
dataTransfer 对象
ssisse的博客
07-18 742
dataTransfer 对象 提供了对于预定义的剪贴板格式的访问，以便在拖曳操作中使用。 DHTML元素属性列表 属性 描述 dropEffect 设置或获取拖曳操作的类型和要显示的光标类型。 effectAllowed 设置或获取数据传送操作可应用于该对象的源元素。 方
javascript基础学习系列三百二十五：dataTransfer对象
m0_68635815的博客
03-09 771
除非数据受影响，否则简单的拖放并没有实际意义。为实现拖动操作中的数据传输，IE5 在 event 对象上暴露了 dataTransfer 对象，用于从被拖动元素向放置目标传递字符串数据。因为这个对象是 event 的属性，所以在拖放事件的事件处理程序外部无法访问 dataTransfer。在事件处理程序内部，可以使用这个对象的属性和方法实现拖放功能。dataTransfer 对象现在已经纳入了 HTML5 工作草案。
javascript来回拖拽dragg，其中dataTransfer传递数据
yexiandewenku的博客
06-09 2386
来回拖放效果 项目 中电科 五十四所 卫星导航运营 收藏夹 //开始拖动 var dsHandler=function(evt){ evt.dataTransfer.setData("text/plain","" +evt.target.id +evt.target.innerHTML); } //放开元素事件 va
（详细）dataTransfer：拖拽修改鼠标样式及属性详解
最新发布
大雾起了清晨
06-12 1649
在拖拽过程中，可以通过对象的dropEffect属性来改变鼠标的样式，从而给用户更直观的反馈。dropEffectnone：显示一个禁止的图标，表示不允许放置。copy：显示一个加号图标，表示将复制数据。move：显示一个四向箭头，表示将移动数据。link：显示一个链条图标，表示将创建链接。
HTML5拖放详解：事件与实例演示
HTML5拖放（Drag and Drop）是一项强大的交互式功能，允许用户通过直接拖动元素在页面上实现数据交换或布局调整。在HTML5标准中，所有元素都支持拖放操作，即使没有显式设置`draggable`属性，像链接和图片这样的元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值