一个简单的Vue2例子讲明白拖拽drag、移入dragover、放下drop的触发机制先后顺序

 

几个小细节说明:

  1. 执行顺序dragstart→dragover→drop
  2. 被拖拽的物体必须要设置draggable="true"(实际上只需要draggable就可以了,默认就是true),否者默认一般是不允许被拖拽的(图片除外)
  3. 被放入的位置必须要加上监听@dragover="$event.preventDefault()",否者不会触发@drop监听
  4. 如需要从被拖拽物体传递信息到放置区域中,可以使用e.target.dataTransfer的setData设置自定义的参数传值(字符串类型,如需传object请JSON.stringify一下下),使用e.target.dataTransfer的getData去获取对应的内容
<template>
  <div :class="$options.name">
    <div class="drag" draggable @dragstart="dragstart">被拖拽物体</div>
    <div class="drop" @dragover="$event.preventDefault()" @drop="drop">放入的位置</div>
  </div>
</template>
<script>
export default {
  name: "testDrag",
  methods: {
    dragstart(e) {
      let 需要传输的内容 = {
        cssText: `background-color: #F56C6C;color: white;font-size: 24px;`,
        text: `<p>支持HTML</p><br><b>显示这句话</b>`,
      };
      e.dataTransfer.setData("自定义字段名", JSON.stringify(需要传输的内容));
    },
    drop(e) {
      let 需要传输的内容 = JSON.parse(e.dataTransfer.getData("自定义字段名"));
      e.currentTarget.style.cssText = 需要传输的内容.cssText;
      e.currentTarget.innerHTML = 需要传输的内容.text;
    },
  },
};
</script>
<style lang="scss" scoped>
.testDrag {
  .drag {
    width: 100px;
    height: 100px;
    color: white;
    background-color: #f56c6c;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .drop {
    margin-top: 20px;
    width: 300px;
    height: 300px;
    background-color: #409eff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
</style>

下一个进阶的例子,实现拖拽过程中,被放入的区域和放入的物体同时发生状态(样式)变化简单讲述ondragstart、drag、ondragend、ondragenter、ondragover、ondrop、ondragleave七个与拖拽相关的监听事件,并运用实现拖拽过程放置样式变化-CSDN博客文章浏览阅读81次。【代码】一个简单的Vue2例子讲明白拖拽drag、移入dragover、放下drop的触发机制先后顺序。一个简单的Vue2例子讲明白拖拽drag、移入dragover、放下drop的触发机制先后顺序-CSDN博客。时触发(即便不移动也会触发)https://blog.csdn.net/qq_37860634/article/details/136784325

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

WEB前端 HTML 列表表格

列表 有序列表 使用“ol”创建“有序列表”&#xff0c;使用“li”表示“列表项” <body><ol type"1"><li>列表1</li><li>列表2</li><li>列表3</li></ol><ol type"A"><li>列表A<…

GaussDB数据库的索引管理

目录 一、引言 二、GaussDB数据库中的索引基本概念 1. 什么是GaussDB索引&#xff1f; 2. GaussDB索引的作用 三、GaussDB支持的索引类型 1. B-Tree索引 2. GIN索引 3. GiST索引 4. SP-GiST索引 四、创建和管理GaussDB索引 1. 创建索引 2. 删除索引 3. 索引的优化…

‍掌握SQL魔法:用`ORDER BY RAND()`随机化返回你的SQL查询结果!

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

Redis实现分布式锁源码分析

为什么使用分布式锁 单机环境并发时&#xff0c;使用synchronized或lock接口可以保证线程安全&#xff0c;但它们是jvm层面的锁&#xff0c;分布式环境并发时&#xff0c;100个并发的线程可能来自10个服务节点&#xff0c;那就是跨jvm了。 简单分布式锁实现 SETNX 格式&…

多行业万能预约门店小程序源码系统 带完整的搭建教程以及安装代码包

在数字化转型的大趋势下&#xff0c;门店预约服务已经成为提升客户体验、优化资源配置的关键环节。然而&#xff0c;市面上的预约系统往往功能单一&#xff0c;难以满足多行业的需求。小编给大家分享一款多行业万能预约门店小程序源码系统。该系统不仅具备高度的可定制性&#…

图文并茂!在Oracle VM VirtualBox上安装Ubuntu虚拟机的详细步骤指南

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

【php基础】输出、变量、

php基础补充 1. 输出2.和"的区别3.变量3.1变量的命名规则3.2 两个对象指向同一个值3.3 可变变量 4.变量的作用域5. 检测变量 1. 输出 echo: 输出 print: 输出&#xff0c;输出成功返回1 print_r(): 输出数组 var_dump(): 输出数据的详细信息&#xff0c;带有数据类型和数…

python-redis缓存装饰器

目录 redis_decorator安装查看源代码使用 redis_decorators安装查看源代码\_\_init\_\_.pycacheable.py 各种可缓存的类型cache_element.py 缓存的元素caching.py 缓存主要逻辑 使用 总结全部代码参考 redis_decorator 安装 pip install redis_decorator查看源代码 from io …

【LeetCode热题100】 226. 翻转二叉树(二叉树)

一.题目要求 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 二.题目难度 简单 三.输入样例 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1] 示例 2&#xff1a; 输入&#xff1a;…

做一个58要多少钱?

做一个58要多少钱&#xff1f; 好久都没遇到这种询盘客户了&#xff0c;要是默认客户也许我会简单的勾兑下&#xff1f; 1、有没有源代码&#xff1f; 2、预算多少钱&#xff1f; 3、大概的开发周期&#xff1f; 熟悉的客户我只有一个回复&#xff1a;不做。懂得都懂&#xff…

业务版图全面扩展:维谛技术Vertiv在艾默生网络能源时代后的持续增长

近年来&#xff0c;全球数字化转型、AI算力发展等等一系列全新的趋势&#xff0c;正在构建一个全新的数字世界&#xff0c;为关键基础设施市场提供了广阔的发展机遇。 维谛技术&#xff08;Vertiv&#xff0c;NYSE&#xff1a;VRT&#xff09;作为一家拥有全球视野的专业化厂商…

每日一题:LeetCode2.两数相加

给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。 请你将两个数相加&#xff0c;并以相同形式返回一个表示和的链表。 你可以假设除了数字 0 之外&#xff0c;这两个数都不会以 0 …

题目11—盛最多水的容器

题目来源于LeetCode 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 题解&#xff1a;指针…

simulink平面五杆机构运动学仿真

1、内容简介 略 68-可以交流、咨询、答疑 2、内容说明 simulink平面五杆机构运动学仿真 [ 摘 要 ] 以 MATLAB 程序设计语言为平台 , 以平面可调五杆机构为主要研究对象 , 给定机构的尺寸参数 , 列出所 要分析机构的闭环矢量方程 , 使用 MATLAB 软件中 SIMULINK 仿真工…

使用ngrok实现项目本地部署公网访问(内网穿透)

1.官网注册 官网地址:https://ngrok.com/ tips:若使用邮箱注册自行认证 2.下载对应部署电脑 压缩包 (此处笔者使用自己电脑因此以Windows11作为案例) 解压下载的ngrok压缩包,在对应目录进入命令提示符装口(也可直接在对应目录顶部显示栏输入cmd按回车键 或 在目录空白处…

【MATLAB源码-第162期】基于matlab的MIMO系统的MMSE检测,软判决和硬判决误码率曲线对比。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 MIMO系统(Multiple-Input Multiple-Output&#xff0c;多输入多输出系统)是现代无线通信技术中的关键技术之一&#xff0c;它能够显著增加通信系统的容量和频谱效率&#xff0c;而不需要增加额外的带宽或发射功率。在MIMO系统…

第2章 进程与线程(3)

2.3 同步与互斥 引入同步的原因是【进程的并发具有异步性,以各自独立不可预知的速度推进】 2.3.1 同步与互斥的基本概念 1.临界资源:一次仅仅允许一个进程所使用的资源叫做临界资源。 2.同步:进程同步是确保多个进程在共享资源的访问过程中按照一定规则进行协调和管理的过程。…

Android 徒手抓取trace方式

1, 打开开发者选项 2, 进入开发者选项中系统跟踪 3,使能系统跟踪中选项 4,可在下拉框快捷关闭trace跟踪 5,停止跟踪 会生产trace文件,路径如下: /data/local/traces

助推直播产业升级与经济转型 天府锋巢直播产业基地成都开园

2023年年末&#xff0c;位于成都天府新区兴隆湖板块的天府锋巢直播产业基地正式开园&#xff0c;为成都直播产业注入了新的活力&#xff0c;助推成都经济转型和产业升级。天府锋巢直播产业基地的成立&#xff0c;不仅是成都直播产业的一大盛事&#xff0c;更是对成都经济发展的…

计算机毕业设计 | SpringBoot+vue 移动端社区物业管理系统(附源码+论文)

1&#xff0c; 概述 课题背景 近几年来&#xff0c;随着物业相关的各种信息越来越多&#xff0c;比如报修维修、缴费、车位、访客等信息&#xff0c;对物业管理方面的需求越来越高&#xff0c;我们在工作中越来越多方面需要利用网页端管理系统来进行管理&#xff0c;我们所需…