发生拖动时，从拖动目标(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. selenium 之可视模式、静默模式、忽略证书不可用的设置

    1.可视模式的设置(在前台工作) from selenium import webdriver import time url = "https://y.qq.com/n/ryqq/song ...

  2. 遗传算法 Genetic Algorithms

    遗传算法 Genetic Algorithms 遗传算法是一种"adaptive heuristic search algorithm"(自适应启发式搜索算法),虽不明.但觉厉.其 ...

  3. ActiveMQ 常见集群模式

    Master Slave 架构模式 这种模式是基于文件共享锁的高可用集群,个人理解其实是一种 Failover 模式,可以是一主一从,也可以是一主两从. 本文使用 Docker 搭建一个主从模式的 A ...

  4. Ubuntu 22.04 运行 Appimage 文件

    解决方法 sudo apt-get update sudo apt install fuse libfuse2 chmod a+x *.appimage 参考资料 https://bynss.com/ ...

  5. 使用SQL获取当前周别，oracle日期处理

    使用SQL获取当前周别 select to_char(sysdate,'yyyyww') from dual  select to_char(to_date('20200611','yyyymmdd' ...

  6. CSS文字超出宽度---换行总结

     2021-5-5重新总结---CSS文字超出宽度---附代码 <!DOCTYPE html> <html lang="en"> <head> ...

  7. django框架之drf：3、API执行流程、Response源码剖析、序列化器的简介和使用、反序列化的校验

    Django框架之drf 目录 Django框架之drf 一.APIView执行流程 1.API执行流程总结(重点) 2.补充 二.Response源码剖析 1.Response类总结(重点) 三.序 ...

  8. 创建型模式 - 单例模式Singleton

    单例模式的定义与特点 创建型模式:         单例模式的定义:指一个类只有一个实例,且该类能自行创建这个实例的一种模式. 例如,Windows中只能打开一个任务管理器,这样可以避免因打开多个任务 ...

  9. DataX二次开发——新增HiveReader插件

    一.研发背景 DataX官方开源的版本支持HDFS文件的读写,并没有支持基于JDBC的Hive数据读写,很多时候一些数据同步不太方便,比如在读取Hive之前先执行一些sql.读取一些Hive的视图数据 ...

  10. voxel体素网络滤波器

    1.简介 在进行建图的时候,由于多个视角内存在视野重叠,即多个摄像头看到同样的像素点,这样在重叠区域内会存在大量的位置十分相近的点,这会占用很多内存空间.体素网络滤波保证了在某个一定大小的立方体内只有 ...