首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何保持拖动项目在以前的位置,直到在vue可拖动中释放

在Vue可拖动中,要保持拖动项目在以前的位置直到释放,可以通过以下步骤实现:

  1. 首先,确保你已经安装了Vue和相关的拖动库,比如vuedraggable
  2. 在Vue组件中,引入vuedraggable库,并在模板中使用draggable指令来实现拖动功能。例如:
代码语言:txt
复制
<template>
  <div>
    <draggable v-model="items" :options="dragOptions">
      <div v-for="item in items" :key="item.id">{{ item.name }}</div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
      dragOptions: {
        group: 'items',
        animation: 150,
        // 其他拖动选项...
      },
    };
  },
};
</script>
  1. 在上述代码中,v-model="items"items数组与拖动列表绑定起来,draggable组件会根据v-for循环生成的元素实现拖动功能。
  2. 为了保持拖动项目在以前的位置,需要在拖动开始时记录项目的初始位置,并在拖动结束时将项目放回初始位置。可以通过@start@end事件来实现。修改上述代码如下:
代码语言:txt
复制
<template>
  <div>
    <draggable v-model="items" :options="dragOptions" @start="onDragStart" @end="onDragEnd">
      <div v-for="item in items" :key="item.id">{{ item.name }}</div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
      dragOptions: {
        group: 'items',
        animation: 150,
        // 其他拖动选项...
      },
      initialIndex: null,
    };
  },
  methods: {
    onDragStart(event) {
      this.initialIndex = event.oldIndex;
    },
    onDragEnd(event) {
      const newIndex = event.newIndex;
      const draggedItem = this.items.splice(newIndex, 1)[0];
      this.items.splice(this.initialIndex, 0, draggedItem);
      this.initialIndex = null;
    },
  },
};
</script>
  1. 在上述代码中,onDragStart方法记录了拖动开始时的初始位置,onDragEnd方法将拖动的项目放回初始位置。通过splice方法将项目从新位置删除,并插入到初始位置。

这样,拖动项目就能保持在以前的位置,直到释放。你可以根据实际需求调整代码和样式,以适应你的项目。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 创建拖动浮动操作按钮

但是,它不允许您拖动按钮。如果你想让它可拖动怎么办。本教程有一个示例,说明您需要做什么才能创建浮动操作按钮,只要它位于父小部件内,就可以将其拖动到屏幕周围任何位置。...创建拖动浮动操作按钮 我们将为这样小部件创建一个类。我们需要处理第一件事是使按钮跟随指针拖动能力。可以使用小部件之一是Listener,它能够检测指针移动事件并提供移动细节。...通常,所需行为是onPressed仅在点击按钮时调用回调,而不是拖动结束时调用。然而,当拖动结束时,指针向上事件也会被触发。作为解决方案,我们需要跟踪按钮是否被拖动。...所以,我们可以检查内部onPointerUpcallback 仅onPressed值为_isDraggingis 时调用回调false。 下面是用于创建拖动浮动操作按钮类。...Flutter 创建拖动浮动操作按钮。

5.7K10

【实战技巧】VUE3.0实现简易拖放列表排序

例如,用户可使用鼠标选择拖拽(draggable)元素,将元素拖拽到可放置(droppable)元素,并释放鼠标按钮以放置这些元素。拖拽操作期间,会有一个拖拽元素半透明快照跟随着鼠标指针。...拖拽事件 可用拖拽事件一共有七个,其中三个是用于拖拽元素 dragstart 元素开始被拖动时触发 dragend 拖动操作完成时触发 drag 元素被拖动时触发 四个是用于释放区域 dragenter...当被拖动元素进入到释放区所占据屏幕空间时触发 dragover 当被拖动元素释放区内移动时触发 dragleave 当被拖动元素没有放下就离开释放区时触发 drop 当被拖动元素释放区里放下时触发步骤...实现思路 原生js实现拖拽排序我还没有弄,但是vue中就非常简单,因为我们触发任何事件时候,都可以拿到元素index,我们可以靠index轻易实现。...dragstart记录下旧索引 dragover记录下新索引,每次经过一个都会更新 drop事件处理数组,删掉旧元素,目标索引添加新元素 //简略后伪代码 详情请查看源码 <div

2K40
  • HTML5 拖放API与Vue.js实战

    设置看板 运行以下命令创建我们看板项目vue create kanban-board 创建项目时,该选择只包含 Babel 和 ESlint 默认预设。...DataTransfer 提供了添加要通过拖放传输项目位置。...从拖动释放元素这段时间中,元素被拖放后,将会在被拖动元素上触发两个事件:dragstart 和 dragend。 现在还不能把拖动元素拖放到任何地方。...提交表单后还要清除 cardData ,以便在添加新项目时不会显示以前数据,并且还要将 inAddMode 设置为 false 并发出 newcard 事件。...总结 本文中,我们介绍了什么是 HTML 5 拖放 API ,如何使用,以及如何Vue.js 实现。 拖放功能也可以在其他前端框架和原生 JavaScript 中使用。

    4.3K10

    手写实战应用:Vue拖拽插件应用与选择

    大家好,我是程序视点小二哥 因为项目上有一个规定区域内自由拖拽小需求,自己纯js写又有点小麻烦,就花了点时间寻找到这个小组件。...vue-drag-resize是一个专门用于vue项目的拖拽组件,定义元素拖拽,或者缩放,或者二者兼有;可限制拖拽最大与最小值、拖拽范围是否超出其父元素;并且支持触摸事件安装npm i -s vue-drag-resize...h是高x表示相对于父元素x轴上初始偏移量y是y轴上初始位置引入好组件后,此时拖拽元素既可以拖拽,也可以缩放,可以使用isDraggable来控制是否允许拖拽,默认是true//禁止拖拽 <vue-drag-resize... {   display:none; } 拖拽层级vue-drag-resize层级默认是第一个元素最小,然后依次递增 图片项目有个要求:当拖动元素时,始终保持拖动元素最上层,此时就需要监听拖动元素...,电子白板上也会跑,于是就产生了适配问题,不同设备上有可能会造成位置错乱。

    40130

    基于Vue拖拽插件实战应用,但最后我还是选择了手写

    大家好,我是前端实验室大师兄 因为项目上有一个规定区域内自由拖拽小需求,自己纯js写又有点小麻烦,就花了点时间寻找到这个小组件。...限制拖拽范围 修改组件默认样式 拖拽层级 拖拽点击事件 安装使用 vue-drag-resize是一个专门用于vue项目的拖拽组件,定义元素拖拽,或者缩放,或者二者兼有;可限制拖拽最大与最小值...h是高 x表示相对于父元素x轴上初始偏移量 y是y轴上初始位置 引入好组件后,此时拖拽元素既可以拖拽,也可以缩放,可以使用isDraggable来控制是否允许拖拽,默认是true //禁止拖拽...:none; } 拖拽层级 vue-drag-resize层级默认是第一个元素最小,然后依次递增 项目有个要求:当拖动元素时,始终保持拖动元素最上层,此时就需要监听拖动元素,把当前元素设置为最高级...,电子白板上也会跑,于是就产生了适配问题,不同设备上有可能会造成位置错乱。

    1.7K60

    drag事件详解:html5鼠标拖动排序及resize实现方案分析及实践

    ,被拖拽对象离开目标对象时触发拖动事件列表每一个拖动元素,拖动过程,都会经历三个过程,拖动开始-->拖动过程--> 拖动结束拖动目标上触发事件 (源元素-被拖动元素):ondragstart...- 元素开始被拖动时候触发——拖动什么ondrag - 元素被拖动时反复触发ondragend - 拖动操作完成时触发释放目标时触发事件(目的地对象):ondragenter - 当被鼠标拖动对象进入其容器范围内时触发此事件...ondragover - 当被拖动元素目的地元素内时触发——放到何处ondragleave - 当被拖动元素没有放下就离开目的地元素时触发ondrop - 一个拖动过程释放鼠标键时触发此事件——...el.ondragover = function(e){   e.preventDefault();}el.ondrop = function(e){ e.preventDefault();}vue项目中.../uri-list注:如果给定类型数据不存在,则将其添加到拖动数据存储末尾,使得dataTransfer.types列表最后一个项目将是新类型。

    6.4K21

    【JS】1724- 重学 JavaScript API - Drag and Drop API

    这里介绍几个常见使用场景: 相册应用,用户可以拖动图片到不同分组或标签中进行分类; 项目任务管理应用,用户可以拖动任务卡片进行排序或分组; 文件上传功能,用户可以将文件拖动到指定区域进行上传;...如何使用 使用拖放 API 主要包括以下 3 个步骤: 「定义拖拽(draggable)元素」:将需要拖动元素标记为拖拽,并指定相应事件处理逻辑。...通过这样实现,用户可以轻松地将图片拖动到不同相册中进行分类和管理。 3.2 项目任务管理应用 项目任务管理应用,用户可以通过拖动任务卡片进行排序、分组或更改任务状态。...下面是一个简单示例代码,演示了如何使用拖放 API 实现项目任务管理应用拖放功能: <div class="task" draggable="true...总结 本文主要介绍了 Drag and Drop API,我们了解了这个 API <em>的</em>作用和<em>如何</em>使用,<em>在</em>文章<em>中</em>还通过一些常见使用示例和大家展示代码<em>如何</em>实现,最后还给出一些使用建议和注意,希望大家能够更好<em>的</em>了解

    27120

    Vue拖拽组件开发实例

    组件化搭建页面图示: 上图可看出,Vue,所谓组件化搭建页面,简单来说,页面实际上是由一个个功能独立组件搭建而成。这些组件之间可以组合、嵌套,最终形成了我们页面。...Vue实现 使用Vue,最大不同之处是我们几乎不去操作DOM,要充分利用Vue数据驱动来实现拖拽功能。本例,我们只需垂直方向上拖动元素,所以只需考虑垂直方向移动即可。...顺着这个思路走下去,我们知道: oldIndex:元素在数组初始索引index; elHeight:单个元素块高; currTop=clientY-elTop:元素拖动过程中距离可视区上侧距离;...若小于某个设定值,则什么也不做; 然后,touchmove事件判断,若 (currTop-initTop)%elHeight>=elHeight/2成立,即当元素拖至另一个元素块等于或超过1/2位置时...牢记一点,切勿Vue过多得操作DOM,要能深入理解Vue数据驱动核心思想。

    4.4K130

    抛开插件,你真的懂拖动怎么实现吗?

    回到正题,本章将分享一些关于 Javascript 拖动内容,探索拖动过程奥秘。 元素拖动 刚开始,咱们循序渐进,先来实现一个最简单功能,让一个元素变成拖动元素。 布局与样式: <!...稍微有一点区别是,将元素变成拖动逻辑与前面讲不太一致了。...这里用上了 getBoundingClientRect[7] API,其作用是为了优化前面 mouseMoveHandler 函数,需要不断去记录鼠标上一个位置繁琐过程。...大概二者区别如下: 1️⃣ 拖动元素位置 = 拖动元素原本位置 + 拖动距离 2️⃣ 拖动元素位置 = 根据鼠标最新位置直接计算拖动元素最新位置 = 鼠标最新位置 - 鼠标拖动元素上距离 鼠标拖动元素上距离...这是关键点,我们要如何知道拖动元素是往上还是往下呢❓并且交换元素位置时机如何把握呢❓ 看如下图,假设了中间三个元素中心点坐标分别如下图。

    6610

    Silverlight自定义鼠标

    Popup这东西现在是很少用了,不过Silverlight 2 RC以前是没有ComboBox,那时候通常就用Popup自己做一个ComboBox。...这个方法通常用在鼠标拖动,譬如在TextBox拖动选中文字,或是拖动滚动条。...鼠标按下时执行这个方法,如果没有其它元素已经捕获了鼠标,则返回True,并且无论鼠标移动到哪里都可以接收鼠标输入,直到执行ReleaseMouseCapture()释放鼠标。   ...而且鼠标样式还是捕获鼠标的FrameworkElement样式(具体参考Window拖动边框修改窗口大小时鼠标样式,拖动时无论移动到哪里,鼠标样式都是不变)。   ...效率好像不怎么好,而且有两个问题: 1:TextBox鼠标是设置ControlTemplate某个元素,所以在外面设Cursor=Cursors.None是没用,而且拖动选中文字时会捕获鼠标

    67230

    1小时搞定卡片拖拽、自动排列交换位置、拖拽数据存取

    总共有三篇文章,介绍组件制作思路和遇到问题,以及发布到npm上并下载使用过程,发生了什么问题并如何解决。...第一篇为组件封装后使用文档及介绍 第二篇为组件实现思路以及细节 第三篇为将组件打包并上传至npm,如何实现按需加载和下载后使用问题 这是vue实现拖动卡片组件,主要实现了: 拖动卡片与其他卡片位置更换...,并且其他卡片根据拖动位置自动顺移,位置数据实时更新 拖动时候可使用鼠标滚动 卡片根据数据生成,所有参数和内容都是可以自定义,方便应用于不同场景 不同操作事件都可获取到,拖动位置数据会实时更新...下载carddragger npm install carddragger 复制代码 全局安装 在你vue项目的入口js文件中使用,vue-cli生成项目一般为main.js文件 import {installCardDragger...event 第二个参数id,是选中的卡片id swicthPosition 作用: 拖动一个卡片到另外一个卡片位置时候,触发此事件 事件参数: swicthPosition(oldPositon

    4K21

    一个创建产品动画说明视频新手指南

    使播放头(较大蓝色,向下箭头,您可以像在视频上一样从第二个标记拖动到左侧)为零,单击不透明度左侧秒表,然后通过键入将值设置为0%它或单击并拖动标记直到其达到零。 ?...您可以使用变换句柄保持位移,单击并将边界框右下角拖动到正确比例。第二个选项是“时间轴”“转换”卷展栏中使用Scale(“ 缩放”)属性,并将该值设置为大约25%。...当我们它,按command+option+F(或ctrl + alt + F)调整您动画到新合适大小。预览时 它应该与以前一样,只是缩小。 使用关键帧来缩放大小和位置。...导入logo.psd,你早就学会了如何做,并把它放到我们composition。将其拖出屏幕,并在其他元素离开屏幕后时间轴某处创建位置关键帧。...按Separate Dimensions(分开尺寸)按钮(上图右下方)。 ? 选择最后一个红色(X)关键帧,然后向上拖动贝塞尔(黄色)手柄,直到获得一个不错高峰。

    3K10

    提高效率 |ArcGIS Pro 中所有快捷键一网打尽

    将鼠标悬停在曲线上,直到指针变为线段,然后拖动该曲线。 Ctrl + 拖动 移动贝塞尔控点。 移动与另一个折点重合时无法选择贝塞尔控点。将鼠标悬停在控点上,直到指针变为折点,然后拖动该控点。...B + 拖动 3D 场景中环视。 3D 场景,按住 B 键同时单击并拖动,以转动照相机并从您单击位置进行环视。 B + 方向键 从当前位置向周围环视。... 3D 场景,按住 B 键同时单击并拖动,以转动照相机并从您单击位置进行环视。B + 方向键从当前位置向周围环视。... 3D ,照相机保持照相机角度和高度不变同时会向下移动一个屏幕宽度。Home向左移动一个屏幕大小。 2D ,向左平移一个屏幕宽度。... 3D ,照相机保持照相机角度和高度不变同时会向左移动一个屏幕宽度。End向右移动一个屏幕大小。 2D ,向右平移一个屏幕宽度。

    1.1K20

    关于VUE3+TS利用递归组件完成TreeList设计与实现

    ,您啊可能就工资越高) 1、插件如何注册 2、插件需要设计那些事件 3、插件需要传入那些值,从而实现更大灵活性 4、插件能包揽那些功能 我们一个个来解析 插件如何注册 对于vue 来说,插件套路都一样...,我们需要了解一些基础问题 draggable draggable 属性规定元素是否拖动。...3、dragover 当元素或者选择文本被拖拽到一个有效放置目标上时触发 4、dragleave当一个被拖动元素或者被选择文本离开一个有效拖放目标时触发 5、drop 当一个元素或是选中文字被拖拽释放到一个有效释放目标位置时触发...emit('setDragEnterNode', false) isDragEnterNode.value = false } } drop drop 当一个元素或是选中文字被拖拽释放到一个有效释放目标位置时触发...由于我们相当于是拖拽到文件夹拖拽做响应判断,为了拿到正确组件数据 举个例子,我移动到一个文件,那么我就需要向上寻找,找到上级文件夹,再去抛出事件 所以我们有了emit('setDragFolder

    3.2K20

    爬虫篇 | 200 行代码实现一个滑动验证码

    /zh/ 安装完成之后便可以使用 vue 命令了,新建个项目vue create drag-captcha 然后找一张不错风景图,放到 public 目录下,后面我们会引用它。...另外这里需要一个核心包叫做 vue-drag-drop,其 GitHub 地址为:https://github.com/cameronhimself/vue-drag-drop,目录下使用此命令安装...y: event.offsetY, } this.trace = [] } 对于 onDrag 方法来说,就是处理拖动过程一系列拖动动作,这里其实就是计算当前拖动偏移位置,然后把它保存到...,就是 Drag 组件 slot 部分: 这部分定义了拖动过程随鼠标移动图片样式...,这里也和 Drag 滑块一样定义了一样样式,这样拖动过程,就会显示一个和 Drag 滑块一样滑块随鼠标移动。

    1.3K20

    200行代码实现一个滑动验证码

    /zh/ 安装完成之后便可以使用 vue 命令了,新建个项目vue create drag-captcha 然后找一张不错风景图,放到 public 目录下,后面我们会引用它。...另外这里需要一个核心包叫做 vue-drag-drop,其 GitHub 地址为:https://github.com/cameronhimself/vue-drag-drop,目录下使用此命令安装...y: event.offsetY, } this.trace = [] } 对于 onDrag 方法来说,就是处理拖动过程一系列拖动动作,这里其实就是计算当前拖动偏移位置,然后把它保存到...,就是 Drag 组件 slot 部分: 这部分定义了拖动过程随鼠标移动图片样式...,这里也和 Drag 滑块一样定义了一样样式,这样拖动过程,就会显示一个和 Drag 滑块一样滑块随鼠标移动。

    2.5K50

    200 行代码实现一个滑动验证码

    /zh/ 安装完成之后便可以使用 vue 命令了,新建个项目vue create drag-captcha 然后找一张不错风景图,放到 public 目录下,后面我们会引用它。...另外这里需要一个核心包叫做 vue-drag-drop,其 GitHub 地址为:https://github.com/cameronhimself/vue-drag-drop,目录下使用此命令安装...y: event.offsetY, } this.trace = [] } 对于 onDrag 方法来说,就是处理拖动过程一系列拖动动作,这里其实就是计算当前拖动偏移位置,然后把它保存到...,就是 Drag 组件 slot 部分: 这部分定义了拖动过程随鼠标移动图片样式...,这里也和 Drag 滑块一样定义了一样样式,这样拖动过程,就会显示一个和 Drag 滑块一样滑块随鼠标移动。

    1.1K40

    前端里拖拖拽拽了解一下?

    拖动元素期间,一些与拖放相关事件会被触发,像 drag 和 dragover 类型事件会被频繁触发。...dragendondragend当拖动元素被释放(️松开、按键盘 ESC)时拖拽dragenterondragenter当拖动元素到一个释放目标元素时放置dragexitondragexit当元素变得不再是拖动操作选中目标时放置...dragleaveondragleave当拖动元素离开一个释放目标元素放置dragoverondragover当元素被拖到一个释放目标元素上时(100 ms/次)放置dropondrop当拖动元素释放目标元素上释放时放置...1.3 DataTransfer 在上述事件类型,不难发现,放置元素和拖动元素分别绑定了自己事件,如何将拖拽元素和放置元素建立联系以及传递数据?...如果该类型数据已经存在,则在相同位置替换现有数据。 简单拖拽场景,其实可以类比 window.localStorage 对象 setItem() 和 getItem() 方法来理解记忆.

    4.9K30
    领券