文章 2024-10-14 来自:开发者社区

50行代码用Vue实现可拖拽调节的分割布局

当鼠标在分割线位置按下时triggerDragging变量变为true 这时split-pane-wrapper的mousemove中判断triggerDragging如果为true则改变leftOffset,pane-left的width就会随之改变 pane-trigger-con的width是固定的而pane-right采用了弹性布局的flex: 1;使其填充剩余部分...

50行代码用Vue实现可拖拽调节的分割布局
文章 2024-08-29 来自:开发者社区

Vue3拖拽插件(vuedraggable@next)

Vue2拖拽插件(vuedraggable)参考文档官方网站 效果如下图:vuedraggable@4.1.0 在线预览 安装插件 pnpm add vuedraggable@next 引入并使用 <script lang="ts" setup> import { ref, watchEffect } from 'vue' import Draggable from '...

Vue3拖拽插件(vuedraggable@next)
文章 2024-08-15 来自:开发者社区

基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令

前言 使用Vue实现任意上下左右拖拽悬浮的元素,以及具有边界处理的具体实现是网上的大神实现的,也不知是谁了。俺只不过是优化了一下皮毛,写了个在Vue2或Vue3的项目中的示例,配置自定义的全局指令,主要是方便下次使用,记录一下。 一、基于Vue2框架的项目 (1)在 /src/utils/ 目录中新建 diyVueDirectives.js /** * 自定义拖拽指令 */ cons...

基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
文章 2024-08-10 来自:开发者社区

【Vue 3】如何实现动态表单生成器的拖拽功能?

在前端开发中,动态表单生成一直是一个令人头疼的问题。手动创建每一个表单字段不仅费时费力,而且在面对复杂需求时,还容易出错。 有没有一种方法,可以通过拖拽的方式,轻松创建表单呢? 今天,我要和大家分享的是如何在 Vue 3 中使用 VueDraggablePlus 组件库,打造一个高效的动态表单生成器。准备好了吗?让我们开始吧! ...

【Vue 3】如何实现动态表单生成器的拖拽功能?
文章 2024-07-06 来自:开发者社区

vue3【实战】来回拖拽放置图片

效果预览 技术要点 img 标签默认就是可拖拽的(a 标签也是) 事件 e 内的 dataTransfer 对象可用于临时存储事件过程中的数据 ...

vue3【实战】来回拖拽放置图片
文章 2024-07-05 来自:开发者社区

vue 指定区域可拖拽的限定拖拽区域的div(如仅弹窗标题可拖拽的弹窗)

<template> <div class="container" ref="container"> <div class="drag-box" v-drag> <div class="win_head">弹窗标题</div> <div class="win_content">弹窗内容&l...

vue 指定区域可拖拽的限定拖拽区域的div(如仅弹窗标题可拖拽的弹窗)
文章 2024-07-04 来自:开发者社区

vue 组件封装——可自由拖拽移动的盒子

最终效果 完整代码 关键性要点,详见注释 组件封装 superBox.vue ...

vue 组件封装——可自由拖拽移动的盒子
文章 2024-07-02 来自:开发者社区

vue实战——元素的拖拽 + 控制元素无法拖拽出盒子 + 随元素拖拽自适应变化大小的盒子

<template> <div id="box" class="mainBox" @mousemove="move" @mouseup="moveEnd" :style="{ width: boxWidth + 'px', height: boxHeight + 'px', }" > ...

vue实战——元素的拖拽 + 控制元素无法拖拽出盒子 + 随元素拖拽自适应变化大小的盒子
文章 2024-07-01 来自:开发者社区

vue拖拽 —— vuedraggable 表格拖拽行

1. 安装依赖 vuedraggable npm i -S vuedraggable 更多...

vue拖拽 —— vuedraggable 表格拖拽行
文章 2024-04-22 来自:开发者社区

鼠标监视 | 拖拽方块 | Vue

title: 拖拽功能 tags: Vue categories: JavaScript abbrlink: 18a433ce date: 2022-11-26 21:14:19 效果 ...

鼠标监视 | 拖拽方块 | Vue

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

阿里巴巴终端技术

阿里巴巴终端技术最新内容汇聚在此,由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界,将面向未来,制定技术策略和目标并落地执行,推动终端技术发展,帮助工程师成长,打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号:阿里巴巴终端技术,欢迎关注。

+关注