Vue结合HTML5拖放API 实现目录拖拽~

拖放事件

dom被拖拽--->经过一些dom--->到达指定dom

  • 被拖拽的dom:(源对象)

    dragstart 源对象被拖拽

    drag 源对象拖拽过程中

    dragend 源对象拖拽结束(drop事件后执行)

  • 拖拽过程中经过的dom:(过程对象)

    dragenter 源对象进入过程对象

    dragover 源对象在过程对象中移动 (设置event.preventDefault(),否则drop事件不会执行)

    drageleave 源对象离开过程对象

  • 拖拽到达指定的dom:(目标对象)

    drop 拖放到指定目标对象内

  • dataTransfer对象:(拖拽过程中数据传递对象)

    setData()存入数据

      支持格式:text/plain、text/html、text/xml、text/url-list
    

    getData()

    clearData()

实现

实现目录可在同级、子级拖动

思路:
  1. 在dragstart时向dataTransfer对象存入源对象的数据
  2. 在dragenter时给过程对象加同级拖拽标识

p1bVVP.jpg

  1. 在dragenter时同时记录下进入时鼠标的坐标(x1, y1)

  2. 当dragover时依然记录下鼠标的坐标(x2, y2)

  3. 设定规则加子级拖拽标识,例如:Math.abs(x2-x1) > 50

p1bOzQ.jpg

  1. 当dragleave时,去掉所有标识
  2. 当drop时,获取dataTransfer对象的数据,并更新拖拽数据
  3. 当dragend时,去掉所有标识

效果

  1. 拖拽到子级

p1qz1e.jpg

2.拖拽到同级

p1Ly9O.jpg

此例子是结合vue递归组件实现:vue-drag


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366434.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【转】EMC存储移除热备盘Hot spare的方法

转载请在文首保留原文出处:EMC中文支持论坛 https://community.emc.com/docs/DOC-17382 介绍 本文将介绍如何移除Hot spare磁盘的两种方法。 更多信息 方法一: 登录Unisphere导航至Storage -> Disks从列表中找到目标hot spare盘确认Hot spare replaci…

jQuery(一)初识

jQuery 的功能概括1、html 的元素选取2、html的元素操作3、html dom遍历和修改4、js特效和动画效果5、css操作6、html事件操作7、ajax异步请求方式 selector: 操作(DOM)/$(selector).action(): <!DOCTYPE html> <html> <head> <meta charset"utf-8&q…

Java方法中的参数太多,第3部分:构建器模式

在我的前两篇文章中&#xff0c;我研究了如何通过自定义类型和参数对象减少构造函数或方法调用所需的参数数量。 在本文中&#xff0c;我将讨论如何使用构建器模式来减少构造器所需的参数数量&#xff0c;并讨论该模式如何甚至可以帮助采用过多参数的非构造器方法。 在《 有效…

c 连接mysql.mwb_CodeSmith连接mysql提示“找不到请求的 .Net Framework Data Provider”的解决方法...

下载了codesmith 8&#xff0c;连接Mysql却提示“找不到请求的 .Net Framework Data Provider"。&#xff11;&#xff0c;下载MySql.Data.dll&#xff1a;https://dev.mysql.com/downloads/windows/visualstudio/ 下载zip格式的即可&#xff0c;解压后将MySql.Data.dll复…

node那点事(二) -- Writable streams(可写流)、自定义流

可写流&#xff08;Writable Stream&#xff09; 可写流是对数据写入目的地的一种抽象。 可写流的原理其实与可读流类似&#xff0c;当数据过来的时候会写入缓存池&#xff0c;当写入的速度很慢或者写入暂停时候&#xff0c;数据流便会进入到队列池缓存起来&#xff0c;当然即…

第16章-使用Spring MVC创建REST API

1 了解REST 1.1 REST的基础知识 REST与RPC几乎没有任何关系。RPC是面向服务的&#xff0c;并关注于行为和动作&#xff1b;而REST是面向资源的&#xff0c;强调描述应用程序的事物和名词。 为了理解REST是什么&#xff0c;我们将它的首字母缩写拆分为不同的构成部分&#xf…

使用Apache Mahout创建在线推荐系统

最近&#xff0c; 我们一直在为Yap.TV实施推荐系统&#xff1a;在安装应用程序并转到“ Just for you”选项卡后&#xff0c;您可以看到它的运行情况。 我们以Apache Mahout为基础进行建议。 Mahout是一个“可扩展的机器学习库”&#xff0c;其中包含使用协作过滤算法的基于用户…

linux mono mysql_LJMM平台( Linux +Jexus+MySQL+mono) 上使用MySQL的简单总结

近准备把PDF.NET框架的开源项目“超市管理系统”移植到Linux上跑(演示地址&#xff1a;http://221.123.142.196)&#xff0c;使用Jexus服务器和MySQL数据库&#xff0c;相对使用SQLite而言&#xff0c;用MySQL问题比较多&#xff0c;但最后还是一一解决了&#xff0c;先总结如下…

node中的缓存机制

缓存是node开发中一个很重要的概念&#xff0c;它应用在很多地方&#xff0c;例如&#xff1a;浏览器有缓存、DNS有缓存、包括服务器也有缓存。 一、缓存作用 那缓存是为了做什么呢&#xff1f; 1.为了提高速度&#xff0c;提高效率。 2.减少数据传输&#xff0c;节省网费。 …

template里面要做数据渲染,但是数据还没有出来

<el-dialog title"企业详情" :visible.sync"showEditPayment" close"closeDialog" v-if"detail"><el-tabs type"border-card"><el-tab-pane label"客户信息"><el-row><el-col class&q…

《H5 移动营销设计指南》 读书笔记整理

一个前端工程师最近迷上了营销类的H5页面&#xff0c;被五花八门的H5页面迷的眼花缭乱&#xff0c;兴趣使然&#xff0c;于是买了一本《H5 营销设计指南》&#xff0c;看完以后对营销类的H5页面有了更深的理解&#xff0c;感觉很实在&#xff0c;所以参考读书笔记整理成PPT分享…

Stacktraces告诉了事实。 但事实并非如此。

我们公司致力于使软件错误的原因对开发人员和运营透明。 与替代解决方案相反&#xff0c; 我们将问题的位置浮出水面&#xff0c;使您指向源代码中的恶意行。 即使我们目前以检测内存泄漏的能力而闻名&#xff0c;但我们也正在扩展到其他领域。 为了给您一些有关我们研究方向的…

mysql-plus多数据库_IDEA项目搭建九——MybatisPlus多数据库实现

一、简介MybatisPlus中引用多数据库时&#xff0c;传统的配置就失效了&#xff0c;需要单独写配置来实现&#xff0c;下面就说一下具体应该如何操作二、引入MybatisPlus多数据源配置还是先看一下我的项目结构&#xff0c;Model是单独的模块&#xff0c;请自行创建1、创建一个Ma…

写一个函数的程序,判断是否是浮点数

算法&#xff1a; 0.先把小数&#xff0c;转换成str类型&#xff0c;才能调以下方法判断&#xff1b; 1.先判断数值中&#xff0c;是否有小数点&#xff0c;用count计数器&#xff1b; 2.是小数的&#xff0c;需要以‘.’分割小数&#xff1b; 3.小数点左侧若是负数&#xff0c…

数字逻辑基础篇1

1. 双阈值准则在模拟条件下&#xff0c;假设点亮灯泡需要1.7V以上电压。抽象为数字电路&#xff0c;可以认为&#xff1a; U>1.7V U1 U<1.7V U0 这种条件称之为单阈值&#xff08;1.7&#xff09;&#xff0c;但是单阈值导致的问题是&#xff1a; 电压在1.7V附近…

Neo4j:在Neo4j浏览器的帮助下探索新数据集

当我查看一个新的Neo4j数据库时&#xff0c;发现困难之一是确定其中包含的数据的结构。 我习惯于关系数据库&#xff0c;在该数据库中您可以轻松地获取表列表和外键&#xff0c;从而使它们彼此连接。 传统上&#xff0c;使用Neo4j时很难做到这一点&#xff0c;但是随着Neo4j浏…

V8 —— 你需要知道的垃圾回收机制

前言V8 blog近日发布了文章描述了“并发标记”的新技术&#xff0c;提升标记过程的效率。并发标记是一个主要用新的平行和并发的垃圾收集器替换旧的垃圾回收器的项目&#xff0c;现在Chrome 64和Node.js v10已经默认启用并发标记。讲解之前我们先回顾一下基本知识点。基本概念 …

词法分析器java_Java代码到底是如何编译成机器指令的。

原文地址&#xff1a;https://mp.weixin.qq.com/s/XH-JajAne0O7_yCYE5wBbg作者&#xff1a;Hollis在《Java代码的编译与反编译》中&#xff0c;有过关于Java语言的编译和反编译的介绍。我们可以通过javac命令将Java程序的源代码编译成Java字节码&#xff0c;即我们常说的class文…

python中的PEP是什么?怎么理解?(转)

PEP是什么&#xff1f; PEP的全称是Python Enhancement Proposals&#xff0c;其中Enhancement是增强改进的意思&#xff0c;Proposals则可译为提案或建议书&#xff0c;所以合起来&#xff0c;比较常见的翻译是Python增强提案或Python改进建议书。 我个人倾向于前一个翻译&…

Java方法中的参数太多,第6部分:方法返回

在当前的系列文章中&#xff0c;我正在致力于减少调用Java方法和构造函数所需的参数数量&#xff0c;到目前为止&#xff0c;我一直专注于直接影响参数本身的方法&#xff08; 自定义类型 &#xff0c; 参数对象 &#xff0c; 构建器模式 &#xff0c; 方法重载和方法命名 &…