vue 实现文本的拖拽_Vue中实现拖拽

最新推荐文章于 2024-04-29 05:17:06 发布
最新推荐文章于 2024-04-29 05:17:06 发布
阅读量2.1k 收藏 3
点赞数 1
文章标签： vue 实现文本的拖拽
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35512156/article/details/112157407
版权

84b3c77425f9ce035b74f504cfbab3d0.png

附加条件：不能超出父元素

实现思路： 使用vue自定义指令directives， 监听鼠标按下事件，计算按下时目标元素与父元素的距离，最后通过CSS position-absolute : left / top实现距离改变

(父元素需要有宽高，且有position定位)

1、vue文件中实现

使用directives

template中使用指令

ccb72f5da4c24f803d60baf7cbf703e0.png

script中定义指令

methods: {},
directives: {
    
    drag(el) {
    
      // console.log('el:', el)
      let oDiv = el; // 当前元素
      // 禁止选择拖拽块上的文字
      document.onselectstart = function () {
    
        return false;
      };
      oDiv.onmousedown 
最低0.47元/天 解锁文章
苍穹雲嵐
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue组件Draggable实现拖拽功能
01-19
Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。 具体说明，请参考：学习链接 npm官方演示： vuedraggable特性： 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销操作 当需要完全控制时，可以抛出所有变化 可以和现有的UI组件兼容 使用 安装： npm install vuedraggable 页面引入： import draggable from 'vuedraggable' data定义数据进行模拟：这
vue 实现文本的拖拽_vue 中拖拽的几种实现方法
weixin_39760619的博客
12-28 1328
1 vue cardDragger使用方法：① npm install carddragger② main.js 文件：import {installCardDragger} from 'carddragger'Vue.use(installCardDragger)③ 使用页面：import { cardDragger } from 'carddragger'export default {com...
vue2 使用 Sortable 库进行拖拽操作_vue sortable(1)
最新发布
2401_84446712的博客
04-29 279
原为npm 版， 抽取成 UMD 版便于大家学习参考。3、打开htm 即得到上方 展示效果中 相同效果。2、复制下方代码到 .html。1、本地新建 .html文件。
vue+vuedraggable 实现文字/按钮/div拖拽组件详解
qq_29170455的博客
07-06 3084
vue+vuedraggable 实现文字/按钮/div拖拽组件详解
vue2 实现对拖拽选中文字、复制选中文字的控制以及自定义鼠标右键菜单功能
MyOxygen的博客
08-04 861
禁止复制选中文字，选中文字右键点击复制后，粘贴时显示的内容为空或为上一次复制的内容。记录实现控制拖拽选中、复制选中文字以及自定义鼠标右键菜单时的过程。实现自定义右键菜单，需阻止浏览器的默认行为，再添加自定义事件。RightClickMenu.vue组件，自定义右键菜单样式。
vue中vue-dragger 九宫格拖拽
啦啦迪的技术日常
03-09 3849
1. 官网地址 vue.draggable中文文档 - itxst.comVue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。https://www.itxst.com/vue-draggable/tutorial.html 2. 思路 环境：vue组件； 功能：可以在九宫格中拖动各个元素； UI框架：ele
html5拖动监听
weixin_30537391的博客
08-07 913
在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发 释放目标时触发的事件: ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragover - 当某被...
vue实现div可拖动位置也可改变盒子大小的原理
10-14
在Vue中实现一个div元素既可以拖动改变位置，又可以调整大小的功能，涉及到的核心技术包括事件监听、CSS定位以及DOM操作。下面将详细介绍实现这一功能的步骤和原理。 首先，我们需要监听鼠标事件来处理拖动和改变...
Vue实现移动端拖拽交换位置
10-15
在Vue.js中实现移动端的拖拽交换位置功能，可以极大地提升用户体验，特别是在处理如图片排序、列表布局等交互场景。以下是一个详细的实现步骤和关键知识点： 1. **基础组件结构**： 在给出的代码中，`<template>`...
VUE实现可随意拖动的弹窗组件
10-17
在Vue.js中实现一个可随意拖动的弹窗组件，主要涉及到事件监听、CSS样式以及组件的状态管理。这个组件主要用于解决在PC端使用时，没有现成的可拖动弹窗功能的问题。以下是对实现该功能的关键知识点的详细说明： 1. ...
vue实现div拖拽互换位置
10-17
主要为大家详细介绍了vue实现div拖拽互换位置的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue 实现左右拖拽元素并且不超过他的父元素的宽度
10-17
主要介绍了vue 实现左右拖拽元素并且不超过他的父元素的宽度,需要的朋友可以参考下
vue拖动实现布局，添加元素，拖拽元素，设置文本大小
11-17
关键点有：单个组件拖动，一行多列里面的组件拖动， 单个组件可以拖入一行多列里， 单个组件的拖动好实现，关键是把一个组件拖动到另一个类似于表格里面，而且有的情况下还需要限制拖动只能在水平方向
vue实现移动端拖动排序
10-14
主要为大家详细介绍了vue实现移动端拖动排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue 实现文本的拖拽_基于Vue实现拖拽功能
weixin_36442042的博客
12-28 1002
本文实例为大家分享了Vue实现拖拽功能的具体代码，供大家参考，具体内容如下效果图：HTML代码：位置x:{{val.x}} y:{{val.y}}//注意这里要通过指令绑定函数将当前元素的位置数据传出来JS代码：Vue.directive('drag',//自定义指令{bind:function (el, binding) {let oDiv = el; //当前元素let self = this...
vue 实现文本的拖拽_Vue.Draggable实现拖拽效果（采坑小记）
weixin_36053019的博客
12-28 483
之前有写过Vue.Draggable实现拖拽效果(快速使用)(http://www.cnblogs.com/songdongdong/p/6928945.html)最近项目中要用到这个拖拽的效果，当产品那个今日头条app编辑导航，拖拽的效果时，心里暗爽，(之前玩过呀，很简单的，事实证明，任何看似简单的东西，实现起来都不会那么一帆风顺，当然：当你真正实现了该效果时，会发现其实还是挺简单的：ps:自说...
vue 实现文本的拖拽_基于Vue实现拖拽效果及阻止拖拽
weixin_33279929的博客
12-28 846
参考链接中讲的比较详细，我只使用了其中自定义指令的方法。整体代码如下：exportdefault{data() {return{}},directives: {drag: {//指令的定义bind: function(el) {let oDiv= el; //获取当前元素oDiv.onmousedown = (e) =>{//算出鼠标相对元素的位置let disX = e.clientX -oD...
vue中实现拖拽功能
weixin_54523278的博客
05-28 6285
自定义的全局指令 提示：拖拽指令 文章目录自定义的全局指令一、拖拽1.自定义拖拽指令2.页面挂载3.css样式 提示：以下是本篇文章正文内容，下面案例可供参考 一、拖拽 1.自定义拖拽指令 代码如下（示例）：仅供参考 data(){ return { params:'' } }, directives: { // 自定义拖拽指令，先声明这个指令 drag(el) { // 可就在里写指令的js代码 const oDiv = el // 当前元素
使用流程图插件 vue-super-flow 制作文字拖拽填充效果
sinat_35272898的博客
06-10 6746
vue项目在 html 中加载流程图，使用 vue-super-flow 工具，实现拖拽替换功能
vue 实现文本的拖拽_前端实现文件下载和拖拽上传
05-25
关于 Vue 实现文本的拖拽，可以使用 Vue 的指令来实现。首先需要在元素上绑定 `v-draggable` 指令，然后在指令中实现拖拽的逻辑。 以下是一个简单的实现示例： ``` <template> <div v-draggable> 拖拽我 </div> </template> <script> export default { directives: { draggable: { bind: function (el, binding) { let startX, startY, initialMouseX, initialMouseY function onMouseDown (event) { startX = el.style.left || '0px' startY = el.style.top || '0px' initialMouseX = event.clientX initialMouseY = event.clientY document.addEventListener('mousemove', onMouseMove) document.addEventListener('mouseup', onMouseUp) } function onMouseMove (event) { const dx = event.clientX - initialMouseX const dy = event.clientY - initialMouseY el.style.left = parseInt(startX) + dx + 'px' el.style.top = parseInt(startY) + dy + 'px' } function onMouseUp () { document.removeEventListener('mousemove', onMouseMove) document.removeEventListener('mouseup', onMouseUp) } el.addEventListener('mousedown', onMouseDown) } } } } </script> ``` 关于前端实现文件下载，可以使用 JavaScript 的 `Blob` 和 `URL.createObjectURL` 方法来实现。首先需要创建一个 `Blob` 对象，然后使用 `URL.createObjectURL` 方法生成一个 URL，将这个 URL 赋值给 `<a>` 标签的 `href` 属性，最后模拟点击这个 `<a>` 标签即可。 以下是一个简单的实现示例： ``` <template> <div> <button @click="downloadFile">下载文件</button> </div> </template> <script> export default { methods: { downloadFile () { const content = '这是要下载的文件内容' const blob = new Blob([content], { type: 'text/plain;charset=utf-8' }) const url = URL.createObjectURL(blob) const link = document.createElement('a') link.href = url link.download = 'file.txt' link.click() URL.revokeObjectURL(url) } } } </script> ``` 关于前端实现拖拽上传，可以使用 HTML5 的 `drag` 和 `drop` 事件来实现。首先需要在元素上监听 `dragover` 和 `drop` 事件，并阻止默认行为，然后在 `drop` 事件中获取拖拽的文件，最后将文件上传至服务器即可。 以下是一个简单的实现示例： ``` <template> <div @dragover.prevent @drop.prevent="uploadFile"> 拖拽文件上传 </div> </template> <script> export default { methods: { uploadFile (event) { const files = event.dataTransfer.files // 将文件上传至服务器 } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值