关于HTML5拖放中dataTransfer.setData()的问题。

最新推荐文章于 2024-04-26 16:47:03 发布
VIP文章 最新推荐文章于 2024-04-26 16:47:03 发布
阅读量2k 收藏
点赞数
文章标签： javascript json ViewUI
原文链接：http://www.cnblogs.com/hoganhz/p/6023102.html
版权 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge" >
 6     <meta name="renderer" content="webkit" >
 7     <title>index</title>
 8     <script type="text/javascript" src="js/jquery2.0.0.min.js"></script>
 9     <style>
10         .ListRight a{
11             width: 244px;
12             height: 38px;
13             border: 1px solid #e3e3e3;
14             display: block;
15             line-height: 36px;
16             text-align: center;
17             color: #333333;
18         }
19 
<
最低0.47元/天 解锁文章
weixin_30294021
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序中this.data与this.setData的区别详解
01-03
小程序中我们会经常使用到this.data与this.setData。其中this.data是用来获取页面data对象的，而this.setData是用来更新界面的。那么他们之间的区别与联系你真的搞懂了吗？ Page.prototype.setData() setData 函数...
HTML5--拖放事件与dataTransfer对象
Meskjei的博客
04-04 1万+
文章目录简介拖放事件dataTransfer对象方法例子 简介 若不使用HTML5的拖放事件，我们仍可以通过mousedown、mousemove、mouseup这三个事件来实现页面元素被鼠标拖拽的效果。 然而这样实现的拖拽仅仅是交互上的，即只是显示上的变化，并没有什么实质性的功能。而HTML5中直接提供了拖放的API，只要通过监听元素的拖放事件就能实现各种拖放功能。 若要拖放某个元素，则必须将其...
JS中拖拽时用到的dataTransfer对象
dxj124的博客
01-02 1161
在进行拖放操作的时候，dataTransfer对象可以用来保存被拖动的数据。它可以保存一项或多项数据、一种或多数数据类型。通谷一点讲，就是可以通过它来传输被拖动的数据，以便在拖拽结束的时候，对数据进行其他的操作。 在项目拖动的开始事件(ondragstart)的时候，可以对dataTransfer进行设值操作(setData)。 document.getElementById('source...
IE浏览器拖放事件e.dataTransfer.setData(key,value)报错
皎月明#离人泪
03-15 3944
问题：在做元素拖放时，用了html5的ondragstart（），ondrop（），ondragover（）方法，代码：/*开始拖放*/ function drag(evt) { evt.dataTransfer.setData("targetId", evt.target.id); } /*放*/ function drop(evt){ evt.preventDefault();
React js原生 详解 HTML 拖放 API（鼠标拖放(拖动)功能）
Z_Wonderful的博客
10-11 926
实现一个拖拽功能时先定义好被拖拽元素和放置区域元素
HTML5实战与剖析之原生拖拽(三dataTransfer对象)
梦龙小站
03-10 1万+
虽然通过dragstart、drag和dragend事件实现了原生拖拽。但是这仅仅是拖拽，在IE6和IE7中还是有些拖拽问题，并且也没有实现数据的交换。为了实现数据的交换，IE5引入了dataTransfer对象。dataTransfer对象是事件对象的一个属性，用于从被拖拽元素相放置目标传递字符串格式的数据。因为它是事件对象的属性，所以只能在拖放事件的事件处理程序中访问dataT
DataTransfer(setData()方法)
jasojfosijfoids的博客
02-04 8552
先来看看 官方的解释 DataTransfer对象专门用来存储拖放时要携带的数据，它可以被设置为拖放事件对象的DataTransfer属性。—把拖动的数据存入其中 setData有两个参数： 1.第一个参数为携带数据的数据种类的字符串，只能填入类 似“text/plain”或“textml”的表示 MIME类型的文字 2.第二个参数为要携带的数据 目标元素使用getData（）方法 (1).目标元素接受到被拖放的元素后，执行getData()方法从DataTransfer里获取数据 (2).getD
HTML5通过api实现拖拽讲解和实例分析
kilig_CSM的博客
06-26 2143
在现代Web开发中，实现拖拽功能是一项常见而强大的需求。HTML5引入了拖放API（Drag and Drop API），为我们提供了一种简单而高效的方式来实现拖拽操作。其中，e.dataTransfer是该API中的一个重要属性，用于在拖拽操作中传递数据，并控制拖放的效果和行为。本篇博客将深入探索e.dataTransfer的使用，帮助你更好地理解和应用HTML5拖放功能。e.dataTransfer是HTML5拖放API中的关键属性，它是一个DataTransfer对象，提供了一组方法和属性，用于在拖拽
HTML5里拖放和dataTransfer的坑
monkeydie的博客
09-27 8859
记于：2017.9.27 e.dataTransfer.setData("key",e.target.id); ....... var data=e.dataTransfer.getData("key"); 如上，第一次使用dataTransfer的时候，以为按照JAVA的尿性，第一个参数想当然的当成keyvalue，也就是键值，是自己随意确定，然后再在getData里把keyva
HTML5脚本编程
Berg_liu的博客
11-23 304
JavaScript第十六章HTML5脚本编程 1. 跨文档消息传递 就是来自不同的域的页面建传递消息，简称XDM，核心是postMessage（）方法。目的是向另一个地方（当前页面的ifarme或者当前页面弹出的窗口）传递数据。 postMessage()方法接收两个参数：一条消息和一个表示消息接收方来自哪个域的字符串。第二 个参数对保障安全通信非常重要，可以防止浏览器把消息发送到不安全的地方...
(精华)2020年7月17日 vue vuedraggable实现列表拖动
热门推荐
时光隧道
07-16 56万+
简单的拖动使用 <template> <div> <draggable @start="start" @end="end"> <p v-for="d in list" :key="d.id">{{d.name}}</p> </draggable> </div> </template> <script> import draggab
小程序中this.setData的使用和注意事项
10-16
主要介绍了微信小程序中this.setData的使用和注意事项,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序报错：this.setData is not a function的解决办法
08-29
主要介绍了微信小程序报错：this.setData is not a function的解决办法的相关资料,希望通过本文能帮助到大家解决这样类似的问题，需要的朋友可以参考下
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 350
步骤很详细，直接上教程……
【解决NodeJS项目无法在IDEA中调试的问题】使用JetBrains IDEA 2023 调试nodejs项目
宅斗士的博客
04-23 339
项目采用Ant Design Pro + React，使用前后端分离开发方式，后端可以很容易的打断点调试，但是前端用到了React脚手架，在IDEA中加了调试断点，但是没有什么用处。
vue2---修饰符
weixin_45503872的博客
04-24 1006
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
vue 实现级联选择器功能
清音的博客
04-22 509
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 404
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
css flex布局两个元素水平居中垂直居中
xiaohua616的博客
04-23 369
使用flex布局，让两个元素水平居中垂直居中，具体实现效果如下：
dataTransfer.setData
07-25
dataTransfer.setData方法在JavaScript中用于设置拖放操作中传递的数据。它接受两个参数，第一个参数是数据的格式（通常是MIME类型），第二个参数是要传递的数据。 例如，如果要将文本数据传递给拖放操作的目标元素...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值