文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
    时间不限
    最近一周
    最近一月
    最近三月
  • 来自专栏前端开发随笔

    Vue3文件拖拽上传

    ="drag">

    未选择文件/文件夹

    支持拖拽到此区域上传

    </template> <script setup> import { ref, onMounted, onBeforeUnmount } from 'vue

    85010编辑于 2022-11-07
  • 来自专栏coding个人笔记

    vue拖拽指令

    自己一直很想做个拖拽生成静态页面的东西，说简单也简单，这个东西按道理用jsx语法是最好的，用render方法渲染生成的json。只是自己对这块还是没信心。 今天写个vue的拖拽指令，顺便理一下offsetX、pageX、clientX、screenX这几个属性，一直记不住。 搞明白了这几个相对的距离，就比较容易计算拖拽的距离了。 很早之前就分享过拖拽的一个简单demo，拖拽指令也很简单 Vue.directive('draggable', { inserted: function (el,data) { el.style.position 使用的时候：

    请拖拽
    这是最基础版的，不同需求可能会有不一样的条件，比如移动的距离是否可以小于0，或者限制在某个相对定位relative框里面，这时候是否限制最大最小的移动距离

    1.4K10发布于 2021-01-24
  • 来自专栏前端开发随笔

    Vue3实现图片滚轮缩放和拖拽

    ="image" @mousedown.prevent="moveImg" />

    </template> <script setup> import { ref } from 'vue

    3.2K30编辑于 2021-12-28
  • 来自专栏方球

    vue 3.0 拖拽组件

    useMoveBlock 拖拽容器逻辑 封装拖拽容易移动计算方法 参数 名称 类型 默认值 说明 ctx SetupContext 上下文环境 周期事件 名称 参数 说明 blockMouseDown 源码 move.vue <style lang='stylus' scoped> $color = orange .move{ position absolute border 1px dashed pointSize border-radius $pointSize border 1px solid $color background white transition all .3s

    </template> <script lang='ts'> import { defineComponent, PropType, watch } from 'vue onPointMousedown, onMouseDown } } }) </script> hooks import { ref, computed, SetupContext } from 'vue

    • 1.9K20发布于 2021-01-29
  • 来自专栏方球

    useDrop vue 拖拽hook

    webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50 v-for='item of [ 1, 2, 3 ]' class="move" :key='item' :ref='addEle(item)'>

    实现 import { ref, watch } from 'vue' const CUSTOM = 'CUSTOM' export function getDragDomSign = getProps(callback, setIsHovering) return [ props, { isHovering } ] } vx-hook vue3.0 hook工具， umi hook vue实现

    72720发布于 2020-04-30
  • 来自专栏前端文章小tips

    vue 3.0 拖拽组件

    useMoveBlock 拖拽容器逻辑 封装拖拽容易移动计算方法 参数 名称 类型 默认值 说明 ctx SetupContext 上下文环境 周期事件 名称 参数 说明 blockMouseDown 源码 move.vue <style lang='stylus' scoped> $color = orange .move{ position absolute border 1px dashed pointSize border-radius $pointSize border 1px solid $color background white transition all .3s

    </template> <script lang='ts'> import { defineComponent, PropType, watch } from 'vue onPointMousedown, onMouseDown } } }) </script> hooks import { ref, computed, SetupContext } from 'vue

    79010编辑于 2021-11-29
  • 来自专栏前端实验室

    尤雨溪推荐的拖拽插件，支持Vue2Vue3

    关于 VueDraggablePlus VueDraggablePlus 是一个专为 Vue 打造的拖拽排序模块，基于 Sortablejs 封装，支持 Vue3 或 Vue 2.7+。 如果你想找一个 Vue 2 和 Vue 3 都能使用的拖拽库，这个看起来很不错。 —Vue.js 作者尤雨溪 ps:按照官方的说法，由于 Sortablejs 的 vue3 组件一直没有更新，已经跟 vue3 严重脱节，所以诞生了这个VueDraggablePlus项目。 但貌似有vuedraggable@next这个库是支持VUE3的。嗯~这都不是重点！重点是，VueDraggablePlus可以让你在任何元素上使用拖拽列表！ 功能提醒 功能强大：全面继承 Sortable.js 拖拽排序库的所有功能； Vue 生态支持好：兼容 Vue 3 和 Vue2； 实用灵活：支持组件、指令、函数式调用； TS 支持：这个库本身就是用

    13K11编辑于 2023-12-11
  • 来自专栏小鑫同学编程历险记

    在 Vue3 中实现飘逸的元素拖拽

    的事件有一定的了解，我也是在最近的工作中才重新拾起了这块内容，通过在 Vue3 这种声明式编程风格的框架中把元素拖拽一次讲清楚。 准备实验环境 依旧推荐你来1024Code Fork 我的《【项目模板】Vue3+Vite3+Ts4》 开始这次学习。 PS：Vue3 模板全局样式中的居中属性可能会造成实验干扰，请注意！！！ 记录元素初始位置的坐标，原点位于页面左上角，用来在初始化和被拖拽结束后还原被拖拽元素的位置，固定值不发生变化： const originalPosition = reactive({ x: 10, 在 onMousedown 时，通过指针所在的坐标 - 被拖拽元素初始位置的坐标得到指针此时在被拖拽元素上的坐标，onMousedown 时要为 document 添加 mousemove 和 mouseup /assets/taobao.svg); background-size: cover; } 总结 使用 mousemove、translate 在 Vue3 中实现可以随意拖拽的 Icon 的案例就完成了

    2.8K20编辑于 2023-04-22
  • 来自专栏全栈程序员必看

    vuedraggable自由拖拽_vue可视化拖拽编辑

    最近做的项目要用到拖拽排序，我现在的项目是vue项目，所以我就屁颠屁颠的去百度有木有这样功能的插件，我就知道一定会有，那就是vuedraggable，这是一款很棒的拖拽插件，下面我来说一下怎么引入 首先在 vue项目中，用npm包下载下来 npm install vuedraggable -S 下载下来后，引入插件，在你的vue文件的script标签里面这样引入 import draggable from evt.oldIndex) console.log('拖动后的索引 :' + evt.newIndex) console.log(this.colors); } }, mounted () { //为了防止火狐浏览器拖拽的时候以新标签打开

    2.6K40编辑于 2022-09-20
  • 来自专栏京东技术

    Vue拖拽组件开发实例

    vue是一套用于构建用户界面的渐进式框架。可以用他来封装单文件组件来开发更为复杂的单页应用。 本文主要是通过封装一个拖拽组件的例子，来分析Vue组件化相关知识。 为什么选择Vue? false,          txt: '列表1',          isShow: false        }        ...      ]    },} 假设我们将元素从位置1拖至位置3， Vue的数据驱动是通过MVVM这种框架来实现的，MVVM框架主要包含3个部分:Model、View、Viewmodel。 写到这里，我们俨然已经用Vue实现了移动端的拖拽功能。但是拖拽体验并不好，接下来，我们对它进行优化。 小结 本文从Vue拖拽组件开发为例，剖析Vue组件的结构、开发思路、Vue的数据驱动等，对Vue组件化的原理，进行了更深入的理解。 并将Vue实现拖拽的方案提供给大家学习研究。 P.S.

    4.9K130发布于 2018-04-10
  • 来自专栏方球

    vue 拖拽hooks ts版

    import { ref, } from 'vue' import { useBool } from '. 数据获取标识 const DATA_SIGN = 'DRAG' export function getDragDataSign() { return DATA_SIGN } /** * DOM 绑定拖拽事件 { Object } options 拖拽响应回调, 用于处理不同类型数据 * - onDom dom拖拽释放回调 * - onUri uri拖拽释放回调 * - onFiles file拖拽释放回调 * - onText text拖拽释放回调 * * @param { Object } events 自定义拖拽事件 * * @param { string } dataSign 拖拽取值标识 防止嵌套拖拽时，触发父元素事件

    1.1K20发布于 2021-01-27
  • 来自专栏程序技术知识

    Vue之 Element dialog 拖拽

    Vue之 Element dialog 拖拽 默认情况下，在使用Element的Dialog模块时，弹出框是不能移动的，且 一旦点击遮罩层区域，弹框就会消失。 解决方案： 1 在 utils 中新建 directives.js 文件 import Vue from 'vue' // v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag document.onmousemove = null document.onmouseup = null } } } }) // v-dialogDragWidth: 弹窗宽度拖大 拖小 Vue.directive /utils/directives.js' 3. 

    1.2K10编辑于 2022-04-23
  • 来自专栏技术社区

    vue移动端写的拖拽

    { x: 0, y: 0 }, nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '', } } methods: { // 实现移动端拖拽

    96330编辑于 2022-06-16
  • 来自专栏码艺坊

    Vue项目文件拖拽上传攻略

    为了提升用户体验，我们可以使用拖拽上传的方式，让用户更加直观地完成文件上传操作。本文将详细介绍如何在Vue项目中实现文件拖拽上传功能，包括基本实现步骤、使用第三方库、优化和扩展技巧等内容。 一、实现文件拖拽上传的基础步骤1. 创建上传组件首先，我们需要创建一个Vue组件来实现文件拖拽上传。 3. 发送文件到服务器在onDrop和onFileChange方法中，我们获取到用户选择的文件，我们可以对文件进行处理或者上传至服务器。 使用VueDropzone实现文件拖拽上传VueDropzone是一个基于Dropzone.js的Vue组件，提供了丰富的拖拽上传功能。 通过本文的学习，相信读者可以掌握在Vue项目中实现文件拖拽上传的方法，并根据实际需求进行优化和扩展。希望本文对您在Vue项目中实现文件拖拽上传有所帮助。

    1.5K00编辑于 2025-01-14
  • 来自专栏方球

    封装移动端 vue 拖拽指令

    封装移动端 vue 拖拽指令 通过vue自定义指令，将拖拽行为封装为指令 使用transform做移动效果，需要注意元素初始值的获取，初始值为原始的 translate值，而元素所在非文档位置(pageX this.transitionMove = moveStyle; } end (e: any){ this.openMove = false; } } // 配置指令 Vue.directive

    1.2K20发布于 2019-08-21
  • 来自专栏前端开发随笔

    Vue实现pcH5弹窗拖拽

    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>pc拖拽 /v2.5.16/vue.js"></script> <script> new Vue({ el: '#vue', data: {}, methods content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>H5拖拽 @touchend="touchend">

    </body> <script src="https://cdn.suoluomei.com/common/js2.0/<em>vue</em> /v2.5.16/<em>vue</em>.js"></script> <script> new Vue({ el: "#Vue", data: { x:

    1.5K30发布于 2020-09-02
  • 来自专栏前端黑板报

    Vue自定义指令实现拖拽功能

    -- v-drag 是自定义指令，加上该指令的元素，可以被自由拖拽 -->

    CSS: .box { width: 150px ; height: 150px; background: orange; } JS: <script src="https://cdn.jsdelivr.net/npm/<em>vue</em>/dist/<em>vue</em>.js "></script> <script type="text/javascript"> // 自定义指令 v-drag Vue.directive('drag', function(el) { function() { // 清除mousemove事件 document.onmousemove = null } } }) // 创建Vue 实例 var app = new Vue({el: '#app'}) </script> 目前10000+人已关注加入我们

    1.6K10发布于 2020-09-01
  • 来自专栏青梅煮码

    VUE.DRAGGABLE实现从左到右拖拽功能

    功能描述： 1、左边【一级、二级、三级】字样是不能拖拽的，【item1、item2…】可以拖拽 2、左边items位置固定，只能向右拖拽，不能上下拖拽，如：item7从左边拖到右边，左边的item7消失 ，右边增加item7 3、右边items可以自由拖拽，但不能向左拖拽 4、右边items可以删除，如：点击item7的“×”，右边item7消失，左边item7出现 5、重置时，页面回复初始化状态 实现方法 , {"name": "二级","indexid": 4}, {"name": "item3","id": 3,"indexid": 5}, {"name": "item4","id": 4 Vue.Draggable插件， 下载地址：https://github.com/SortableJS/Vue.Draggable#start-of-content 演示地址：https://sortablejs.github.io /Vue.Draggable/#/simple 3、一开始左边加载所有的items，右边加载展示的items，注意：左边要过滤掉（隐藏）右边有的items，参考filterComs（left,right

    1.6K30编辑于 2023-03-02
  • 来自专栏dmhsq_csdn_blog

    vue+flask实现视频合成(拖拽上传)

    vue+flask实现视频合成 效果如下 欢迎访问博客代码哈士奇 技术 聊天 交流群 974178910 前端交流群 535620886 vue+flask实现视频合成 拖拽上传我们之前一个文章有写过 首先我们看flask 前端获取 配置代理说明 额外说明(如果你使用uni-app) 完整代码 flask代码 md5random.py 用于随机字符串生成 app_service.py 服务代码 vue 代码 演示文件代码 vue.config.js 拖拽上传我们之前一个文章有写过 https://dmhsq.blog.csdn.net/article/details/114109519 原理就是 监听 drop事件 来获取拖拽的文件列表 上传文件 通过axios 上传文件 this,.fileList就是我们的文件列表 let files = this.fileList; let formd timer.start() return response if __name__ == '__main__': app.run(host='0.0.0.0',port=8087) vue

    1.4K30发布于 2021-10-25
  • 来自专栏山海散人技术

    3D拖拽相册的实现

    head>         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">         <title>3D 拖拽相册</title>         <meta name="Keywords" content="关键字,关键字">         <meta name="description" content             .pic{width:120px;height:180px;margin:200px auto 0;position:relative;transform-style:preserve-3d                          <img src="img/<em>3</em>.

    83630发布于 2021-03-03
    • 第 2 页第 3 页第 4 页第 5 页第 6 页第 7 页第 8 页第 9 页第 10 页第 11 页
    点击加载更多

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

    领券