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

简介: 一个简单的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>

下一个进阶的例子,实现拖拽过程中,被放入的区域和放入的物体同时发生状态(样式)变化

image.png


目录
打赏
0
1
1
0
73
分享
相关文章
【vue】 vue2 自定义指令 实现全屏 、对话框拖拽
【vue】 vue2 自定义指令 实现全屏 、对话框拖拽
420 2
iframe 在线预览pdf、word、excel、ppt、txt、图片、视频
iframe 在线预览pdf、word、excel、ppt、txt、图片、视频
百度地图开发:map.setViewport让标注显示在最佳视野内
百度地图开发:map.setViewport让标注显示在最佳视野内
572 0
Element el-color-picker 颜色选择器详解
本文目录 1. 前言 2. 基本用法 3. 带默认值 4. 调整尺寸 5. 小结
2929 0
Element el-color-picker 颜色选择器详解
Vue2拖拽插件(vuedraggable)
这篇文章介绍了如何在Vue 3框架中使用`vuedraggable`插件来实现拖拽功能,并提供了插件的安装、配置和事件处理的示例。
628 1
Vue2拖拽插件(vuedraggable)
基于Vue2用keydown、keyup事件实现长按键盘任意键(或组合键)3秒触发自定义事件(以F1键为例)
基于Vue2用keydown、keyup事件实现长按键盘任意键(或组合键)3秒触发自定义事件(以F1键为例)
|
11月前
|
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
这篇文章介绍了如何在Vue 2或Vue 3项目中实现一个自定义的全局指令`v-dragSwitch`,用于创建可以任意方向拖拽并悬浮的元素,同时包含边界处理的逻辑。
3083 2
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
|
10月前
|
UED
使echarts图例legend只选中一个(selectedMode)
本文介绍了如何在ECharts图表中设置图例(legend)的选中模式为单选('single'),以确保在有多个图例时,用户只能选择一个图例项进行展示,从而提升图表的可读性和用户体验。
1064 1
使echarts图例legend只选中一个(selectedMode)
Vue2项目使用v-viewer插件实现图片预览、切换、缩放、旋转...
这篇文章介绍了在Vue 2项目中如何通过`v-viewer`插件实现图片的预览、切换、缩放、旋转等功能,并提供了插件的安装、配置和使用方法。
2954 0
Vue2项目使用v-viewer插件实现图片预览、切换、缩放、旋转...
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等