发生拖动时，从拖动目标(dragstart事件触发的元素)生成半透明图像，并在拖动过程中跟随鼠标指针。这个图片是自动创建的，你不需要自己去创建它。然而，如果想要设置为自定义图像，那么 DataTransfer.setDragImage(img|element,xOffset，yOffset) 方法就能派上用场。

使用时需注意：1、setDragImage传入的第一个值img或者Element必须是页面中已经存在的元素，不然设置了也是白设置，然而设置不成功时浏览器将使用默认的拖动图片

如果想让只展示父节点数据（忽略子节点），则使用e.DataTransfer.setDragImage(e.target.children[0],0,0)

参考：(8条消息) DataTransfer.setDragImage()自定义拖拽图像遇到的坑_水星梦月的博客-CSDN博客

DataTransfer.setDragImage()自定义拖拽图像遇到的坑的更多相关文章

  1. （原创）[C#] 一步一步自定义拖拽（Drag&Drop）时的鼠标效果：（一）基本原理及基本实现

    一.前言 拖拽(Drag&Drop),属于是极其常用的基础功能. 无论是在系统上.应用上.还是在网页上,拖拽随处可见.同时拖拽时的鼠标效果也很漂亮,像这样: 这样: 还有这样: 等等等等. 这 ...

  2. 基于vite3+tauri模拟QQ登录切换窗体|Tauri自定义拖拽|最小/大/关闭

    前两天有给大家分享tauri+vue3快速搭建项目.封装桌面端多开窗口.今天继续来分享tauri创建启动窗口.登录窗口切换到主窗口及自定义拖拽区域的一些知识.希望对想要学习或正在学习的小伙伴有些帮助. ...

  3. HTML5新特性之Canvas+drag(拖拽图像实现图像反转)

    1.什么是canvas 在网页上使用canvas元素时,会创建一块矩形区域,默认矩形区域宽度300px,高度150px.. 页面中加入canvas元素后,可以通过javascript自由控制.可以在其 ...

  4. Angular 自定义拖拽指令

    指令 组件是一种带模版的指令.指令是超级. 结构型指令(改变布局)和属性型指令(改变外观和行为). Renderer2和ElementRef Angular不提倡直接操作DOM 对于DOM的操作应该通 ...

  5. elementUI 弹出框添加可自定义拖拽和拉伸功能，并处理边界问题

    开发完后台管理系统的弹出框模块,被添加拖拽和拉伸功能,看了很多网上成熟的帖子引到项目里总有一点问题,下面是根据自己的需求实现的步骤: 首先在vue项目中创建一个js文件eg:dialog.js imp ...

  6. Vue.Draggable实现拖拽效果（采坑小记）

    之前有写过Vue.Draggable实现拖拽效果(快速使用)(http://www.cnblogs.com/songdongdong/p/6928945.html)最近项目中要用到这个拖拽的效果,当产 ...

  7. vue 自定义拖拽指令

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. html5 - drag 拖拽

    参考资料: 张鑫旭             : http://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-%E6%8B%96%E6%8B% ...

  9. HTML5拖拽功能中 dataTransfer对象详解

    有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...

  10. 干货之UICollectionViewFlowLayout自定义排序和拖拽手势

    使用UICollectionView,需要使用UICollectionViewLayout控制UICollectionViewCell布局,虽然UICollectionViewLayout提供了高度自 ...

随机推荐

  1. js 中常用函数汇总（含示例）

    〇.前言 js 在日常开发中还是比较常用的,本文将常用的 js 方法简单汇总一下,希望对你我有一点帮助. 一.重复 / 延迟操作 1.设置固定时间间隔,重复执行(setInterval(funcRef ...

  2. 1、Java数据类型

    1.基本数据类型的变量: /** * 1.基本数据类型的变量: * * 1).整数类型:byte(1字节=8bit),short(2字节),int(4字节),long(8字节) * * 2).浮点数类 ...

  3. Potree 001 Potree介绍

    1.Potree是什么 Potree是一种基于WebGL的点云数据可视化解决方案,包含点云数据转化,以及进行可视化的源码.该解决方案的主要优势在于对点云数据进行了多尺度的管理,在数据传输和可视化上都做 ...

  4. 关系数据库——MySQL

    数据库 1.基本操作 1.1命令行操作 mysql -u username -p+password; --连接数据库 flush privileges; --刷新权限 show databases; ...

  5. 通过一个示例形象地理解C# async await异步

    前言 相信大家看过不少讲C# async await的文章,博客园就能搜到很多,但还是有很多C#程序员不明白. 如果搞不明白,其实也不影响使用.但有人就会疑惑,为什么要用异步?我感觉它更慢了,跟同步有 ...

  6. 手把手教大家写书写一个Mqtt网关

    摘要:物联网是现在比较热门的软件领域,众多物联网厂商都有自己的物联网平台,而物联网平台其中一个核心的模块就是Mqtt网关. 本文分享自华为云社区<一文带你掌握物联网mqtt网关搭建背后的技术原理 ...

  7. RAM算法原理

    1 应用场景 信道的不对称性和信道的高波动是移动环境中无线信道的两个显著特征.因此,当在车辆网络等移动环境中使用IEEE 802.11设备时,有一个能够处理这些问题的有效速率自适应方案至关重要.RAM ...

  8. 四、python解释器、环境变量和多版本共存

    目录 一.python解释器 1.python发展方向 2.python解释器 1.历史 2.版本 3.下载 4.安装 5.使用 二.环境变量与多版本共存 环境变量设置 多版本共存 三.运行pytho ...

  9. 【Oculus Interaction SDK】（六）实体按钮 && 按压交互

    前言 这篇文章是[Oculus Interaction SDK]系列的一部分,如果发现有对不上的对方,可以回去翻看我之前发布的文章,或在评论区留言.如果文章的内容已经不适用于新版本了,也可以直接联系我 ...

  10. vue3 h函数 h() 生成 element-plus vnode

    vue3的h函数和vue2的h函数入参不同 下面是vue2的vnode示范 然后是vue3的错误示范 下面是正确示范 let open1=() => { return new Promise(( ...