024el-tree中的DataTransfer.setDragImage()方法实现拖拽节点的Dom自定义展示

最新推荐文章于 2023-08-05 08:58:09 发布
最新推荐文章于 2023-08-05 08:58:09 发布
阅读量473 收藏
点赞数
分类专栏： 物联网项目开发笔记 文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25753445/article/details/127616194
版权

024el-tree中的DataTransfer.setDragImage()方法实现拖拽节点的Dom自定义展示

示例代码

function handleDragStart(node: Node, ev: DragEvents) {
   
  // 通过Dom节点获取到要展示的Dom
  const mDom =
    ev.target.firstElementChild.lastElementCh
最低0.47元/天 解锁文章
阿赛工作室
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
el-tree 拖拽到目标区域并传递数据
michiko98的博客
04-10 1320
<template> <div class="container"> <aside> <el-tree :data="data" node-key="id" default-expand-all @node-drag-start="handleDragStart" draggable :allow-drop="allowDrop" .
【ElementUI中el-tree节点拖拽】
limuzhixing的博客
11-23 1888
ElementUI中el-tree节点拖拽
DataTransfer.setDragImage()自定义拖拽图像遇到的坑
monparadis的博客
03-02 4904
发生拖动时，从拖动目标(dragstart事件触发的元素)生成半透明图像，并在拖动过程中跟随鼠标指针。这个图片是自动创建的，你不需要自己去创建它。然而，如果想要设置为自定义图像，那么DataTransfer.setDragImage()方法就能派上用场。 使用时需注意：1、setDragImage传入的第一个值img或者Element是页面中已经存在的元素，不然设置了也是白设置，浏览器将使用默认的拖动图片 2、当拖拽父节点时，拖拽图片展示的是父节点和...
e.dataTransfer.setDragImage多选拖拽样式的实现
BUG_CONQUEROR_LI的博客
09-20 1510
e.dataTransfer.setDragImage多选拖拽样式的实现(选中多行数据后, 显示对应选中数据的不透明图像
vue中使用原生draggable属性实现拖拽（设置拖拽中图片DataTransfer.setDragImage）
qq_45565693的博客
11-28 2613
vue中使用draggable实现拖拽（设置拖拽中图片DataTransfer.setDragImage）
ElementUI组件库踩坑记录之el-tree
lea的博客
04-22 1341
ElementUI组件库踩坑记录 el-tree 拖拽功能的实现。 目前是想实现实现一个作为目录的树，可以拖拽组件到可操作区域，同时目录也可以移动。 实现思路 1、本来想通过node-drag-end绑定的方法的event.target确定最终拖动到的位置，但是发现target绑定的是被拖拽的元素，后面就根据x,y确定定位阻止原有的移动目录方法（移动目录时有调用api）。 2、但是由于el-tree原有的特性，拖动之后目录还是被拖过去了，失败的几个方法就不具体说了，最终实现 allow-drop绑定的方法
html5 mouseEvent DataTransfer 的setDragImage属性
ISaiSai的专栏
10-08 8714
setDragImage() Set the image to be used for dragging if a custom one is desired. Most of the time, this would not be set, as a default image is created from the node that was dragged. If the nod
el-tree-transfer.rar
04-10
实际上，el-tree-transfer 依赖的 element-ui 组件分别是Checkbox 多选框，Button 按钮，和最主要的Tree 树形控件写成！并非是在 element-ui 的穿梭框组件上的扩展，而仅仅是参照了其外观样式和功能。
ElementUI中el-tree节点的操作的实现
10-15
在ElementUI中，`el-tree`组件用于展示树形数据，它提供了丰富的功能，包括节点的增删改查。在本教程中，我们将探讨如何实现`el-tree`节点的各种操作，包括获取选中节点的ID、添加节点、修改节点以及删除节点。 ...
element el-tree组件的动态加载、新增、更新节点的实现
10-15
主要介绍了element el-tree组件的动态加载、新增、更新节点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-tree实现el-transfer(穿梭框)的效果代码（全）
04-25
勾选右侧的已选资源，效果同左侧一样； 2、勾选全选，则资源全部添加到右侧，左侧的则显示为空 ...4、后台给到的数据是：所有的资源（多维数组）和已分配的资源（一维数组，包含（半勾选）父级数据）
vue el-tree 默认展开第一个节点的实现代码
10-15
主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
本文将详细讲解如何在Element-ui的`el-tree`组件中实现这一功能。 首先，我们要理解`el-tree`的工作原理。`el-tree`是基于Vue.js构建的，它依赖Vue的数据绑定机制来更新视图。当数据源（通常是一个数组）发生变化时...
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
【JavaScript 教程】事件——拖拉事件
油墨香^-^的博客
06-08 3956
作者 | 阮一峰 1、拖拉事件的种类 拖拉（drag）指的是，用户在某个对象上按下鼠标键不放，拖动它到另一个位置，然后释放鼠标键，将该对象放在那里。 拖拉的对象有好几种，包括元素节点、图片、链接、选中的文字等等。在网页中，除了元素节点默认不可以拖拉，其他（图片、链接、选中的文字）都是可以直接拖拉的。为了让元素节点可拖拉，可以将该节点的draggable属性设为true。 <div draggable="true"> 此区域可拖拉 </div> draggable
javascript学习之拖拉事件
最新发布
白话机器学习
08-05 1223
所有拖拉事件的实例都有一个属性，用来读写需要传递的数据。这个属性的值是一个接口的实例。浏览器原生提供一个构造函数，用来生成实例对象。构造函数不接受参数。拖拉的数据分成两方面：数据的种类（又称格式）和数据的值。数据的种类是一个 MIME 字符串（比如text/plainimage/jpeg），数据的值是一个字符串。一般来说，如果拖拉一段文本，则数据默认就是那段文本；如果拖拉一个链接，则数据默认就是链接的 URL。拖拉事件开始时，开发者可以提供数据类型和数据值。拖拉过程中，开发者通过。
html实现拖摘添加,HTML5拖放事件和setDragImage浏览器支持
weixin_42531779的博客
06-24 733
Woody..15setDragImage对于任何非平凡的拖放用例都是IMO的重要特性.例如,考虑多选列表,其中拖动需要包括所有选定的项而不仅仅是拖动手势所在的行.奇怪的是,您想要设置的东西需要在DOM中可见,但更糟糕的是,从版本11开始,IE中根本没有实现此方法.然而,通过一些努力,我能够让它合理地令人满意地工作.可以在超时0函数中从DOM中删除自定义拖动图像节点.所以在dragstart中将它...
elementui中tree树形控件拖拽怎么用？参数代表什么？？
熟悉 vue2 vue3 jquery js echarts
08-09 2557
element-ui文档 大家可以先去看看文档中简单用法 <el-tree :data="treeData" node-key="id" @node-drag-start="handleDragStart" @node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver" @node-d
优化这段代码 let currentDropTarget: any; let transferredImage: HTMLElement | null; function dragTable(e: DragEvent) { if (!e || !e.dataTransfer) return; currentDropTarget = e.target; const field: string | number | undefined = (e.target as HTMLElement)?.id; const column = columnAll.value.find((c) => c.field == field)!; const showedElement = generateDragImage(column?.name); e.dataTransfer?.setDragImage(showedElement || document.body, 0, 0); e.dataTransfer.setData("text/plain", field); } function generateDragImage(name: string) { transferredImage = document.createElement("div"); document.body.appendChild(transferredImage); transferredImage.className = "table-header-transferred-image"; transferredImage.innerText = name; return transferredImage; } const changeBorder = throttle((target) => { if ( (target.draggable || target.classList.contains("s2-index-header")) && currentDropTarget && currentDropTarget != target ) { changeClassName(false); currentDropTarget = target; changeClassName(true); } }, 100); function allowDrop(e: MouseEvent) { e.preventDefault(); const target = e.target as HTMLElement; if (target) changeBorder( target.draggable || target.classList.contains("s2-index-header") ? target : target.parentNode ); } function dropTable(e: DragEvent) { e.preventDefault(); if (!e) return; const dragField = e.dataTransfer?.getData("text/plain") || ""; const dropField = (e.target as HTMLElement)?.id; if (dragField && dropField && dragField != dropField) { changeColumnOrder(dragField, dropField); } } function onDragend() { changeClassName(false); currentDropTarget = undefined; transferredImage && document.body.removeChild(transferredImage); } function changeClassName(isAdded: boolean) { if (isAdded) currentDropTarget.classList.add("s2-self-defined-dom-border"); else currentDropTarget.classList.remove("s2-self-defined-dom-border"); } function changeColumnOrder(dragField: string, dropField: string) { const dragIndex = columnAll.value.findIndex( (item) => item.field == dragField ); const dragColumn = columnAll.value.splice(dragIndex, 1)[0]; const dropIndex = dropField == "-1" ? -1 : columnAll.value.findIndex((item) => item.field == dropField); columnAll.value.splice(dropIndex + 1, 0, dragColumn); dataManager.updateDataConfig({ meta: columnAll.value }); tableManager?.render(dataManager.getFormattedData()); onColumnShowChange(); }
06-01
这段代码可以进行如下优化： 1. 使用类型定义来提高代码可读性和类型安全性； 2. 使用解构赋值来简化代码； 3. 函数名可以更具描述性； 4. 使用可选链操作符来简化代码。 优化后的代码如下： ```typescript type Column = { field: string | number | undefined; name: string; }; let currentDropTarget: HTMLElement | undefined; let transferredImage: HTMLElement | | undefined; function handleDragStart(e: DragEvent): void { const { dataTransfer, target } = e; if (!dataTransfer) return; const field = (target as HTMLElement)?.id; const column = columnAll.value.find((c) => c.field === field)!; const showedElement = generateDragImage(column.name); dataTransfer.setDragImage(showedElement || document.body, 0, 0); dataTransfer.setData("text/plain", field); currentDropTarget = target as HTMLElement; } function generateDragImage(name: string): HTMLElement { transferredImage = document.createElement("div"); document.body.appendChild(transferredImage); transferredImage.className = "table-header-transferred-image"; transferredImage.innerText = name; return transferredImage; } const changeBorder = throttle((target: HTMLElement): void => { if ( (target.draggable || target.classList.contains("s2-index-header")) && currentDropTarget && currentDropTarget !== target ) { changeClassName(false); currentDropTarget = target; changeClassName(true); } }, 100); function handleDragOver(e: MouseEvent): void { e.preventDefault(); const target = e.target as HTMLElement; if (!target) return; const node = target.draggable ? target : target.closest(".s2-index-header"); if (node) changeBorder(node); } function handleDrop(e: DragEvent): void { e.preventDefault(); const dragField = e.dataTransfer?.getData("text/plain") || ""; const dropField = (e.target as HTMLElement)?.id || ""; if (dragField && dropField && dragField !== dropField) { changeColumnOrder(dragField, dropField); } } function handleDragEnd(): void { changeClassName(false); currentDropTarget = undefined; transferredImage && document.body.removeChild(transferredImage); } function changeClassName(isAdded: boolean): void { if (!currentDropTarget) return; const className = "s2-self-defined-dom-border"; isAdded ? currentDropTarget.classList.add(className) : currentDropTarget.classList.remove(className); } function changeColumnOrder(dragField: string, dropField: string): void { const dragIndex = columnAll.value.findIndex((item) => item.field === dragField); const dragColumn = columnAll.value.splice(dragIndex, 1)[0]; const dropIndex = dropField === "-1" ? -1 : columnAll.value.findIndex((item) => item.field === dropField); columnAll.value.splice(dropIndex + 1, 0, dragColumn); dataManager.updateDataConfig({ meta: columnAll.value }); tableManager?.render(dataManager.getFormattedData()); onColumnShowChange(); } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿赛工作室

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值