发生拖动时，从拖动目标(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. SQL语句查询优化方法

    建立索引并命中索引,在查询的时候,要尽量让数据库引擎使用索引.加入explain执行计划 1.尽量避免使用select * 2.尽量避免使用!= 3.尽量避免使用or 优化方式:可以用union代替o ...

  2. latex文档的中文字体设置

    Latex文档的中文字体设置 近日在用latex写论文时遇到了中文字体设置的问题.具体问题如下,正文字体为宋体,摘要和关键词字体为仿宋.作为latex云玩家,我马上百度了中文字体的设置方法.搜索到了如 ...

  3. P4711 「化学」相对分子质量 代码

    #include <bits/stdc++.h> using namespace std; double ret=0; namespace StringUtils { pair<st ...

  4. 通过Terraform创建GCP Pubsub

    1 简介 Terraform是管理许多平台的基础设施的工具,如AWS.GCP和Azure.这篇文章将讲解如何通过Terraform来管理GCP Pub/Sub. 创建GCP项目请参考:初始化一个GCP ...

  5. ios网络协议从http变成https

    最近发了一个很蛋疼的事,iphone16.x以后的系统浏览器自动将http请求切换为https请求了 工程自测 1.在ihone14 pro max,iOS16.1的手机上用http请求是失败的,在i ...

  6. linux 基础（2） 文件权限及其修改

    文件的权限属性 在 linux 中,每个文件都有唯一的"所属者"(user)和"所属群组"(group).owner 和 group 都对文件有特殊的权限 输入 ...

  7. vscode快速删除空白行方法

    1.快速打开替换界面,在Find界面输入^\s*(?=\r?$)\n 2.Alt+R选择Use Regular Expression(Alt+R)即正则表达式模式: 3.选择Replace All(C ...

  8. 从零写一个兼容MySQL/Oracle的Proxy中件间（一）《初识Oracle的通信协议》

    0.前言 MySQL由于开源的原因,有各式各样的中件间Proxy ,极大的丰富了做高可用或迁移的方案,习惯了MySQL生态圈的灵活和便利,Oracle官方不开源代码和协议,没有中间件proxy,显得很 ...

  9. 【分析笔记】DW7888 马达驱动芯片待机模式漏电流过高的问题

    发现问题 客户反馈说我们的硬件关机漏电流很大,但是拔掉电池之后再上电(仍处于关机状态)就会恢复为 16~20uA 左右.这让我也讶异,因为亲自测试过,漏电流只有 MCU 的休眠电流 16~20uA 左 ...

  10. immutable.js 学习笔记（三）----- Map

    一.Map Map在原生的js中对应的是Object这样的结构,它都是key-value的键值对,并且它是无序的 二. API (一) set:设定值 (二)delete:删除值 每做一次增删改查都会 ...