发生拖动时，从拖动目标(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. 搭建漏洞环境及实战——在Linux系统中安装LANMP

    LANMP是Linux下Apache.Nginx.mysql和php的应用环境 演示的是WDLinux 命令:wget http://dl.wdlinux.cn/files/lamp_v3.tar.g ...

  2. 分布式注册服务中心etcd在云原生引擎中的实践

    作者:王雷 etcd是什么 etcd是云原生架构中重要的基础组件,由CNCF孵化托管.ETCD是用于共享配置和服务发现的分布式,一致性的KV存储系统,是CoreOS公司发起的一个开源项目,授权协议为A ...

  3. 【机器学习】李宏毅——Explainable ML(可解释性的机器学习)

    在前面的学习之中,我们已经学习了很多的模型,它能够针对特定的任务,接受我们的输入并产生目标的输出.但我们并不满足于此,我们甚至希望机器告诉我们,它是如何得到这个答案的,而这就是可解释的机器学习. Wh ...

  4. buuctf_Dest0g3_crypto

    babyAES: 题目如下: from Crypto.Cipher import AES import os iv = os.urandom(16) key = os.urandom(16) my_a ...

  5. 05.深入理解JMM和Happens-Before

    大家好,我是王有志. JMM都问啥? 最近沉迷P5R,所以写作的进度很不理想,但不得不说高卷杏YYDS.话不多说,开始今天的主题,JMM和Happens-Before. 关于它们的问题并不多,基本上只 ...

  6. H5直播技术起航

    作者:京东科技 吴磊 音视频基本概念 视频格式就是通常所说的.mp4,.flv,.ogv,.webm等.简单来说,它其实就是一个盒子,用来将实际的视频流以一定的顺序放入,确保播放的有序和完整性. 视频 ...

  7. SSM框架——整合ssm

    SSM整合 1.准备工作 新建一个普通的Maven项目 建好所有需要的架构层 向pom.xml中导入所有的依赖 <!--MyBatis相关--> <dependency> &l ...

  8. JS原生上传文件，读取文件格式，控制文件只可以上传某些格式，并使用fileReader转换格式

    本文为代码片段记录,方便后期使用哇! <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  9. mysql 列约束

    mysql可以对插入的数据进行特定得验证,只有满足条件才可以插入到数据表中,否则认为是非法插入: 例如:人性别只可以是男.女.年龄只能是0-100. ①主键约束查重-PRIMARY KEY,1表一个: ...

  10. Timer的定时调度函数schedule的四种用法

    schedule的四种用法 schedule(task,time) task-所安排的任务  time-执行任务的时间 作用:在时间等于或者超过time的时候执行且仅执行一次 import java. ...