分享一个可用于拖动排序的vue组件

MasonEast 发布于2019-08-20 18:34 / 1559人阅读

摘要：最近要做拖拽相关的功能，本来想自己写，忽然想起来之前在轮子工厂有更新过，还是很好用滴。介绍一款可任意拖动排序的插件。支持桌面和移动端，拖拽过渡动画美观。

最近要做拖拽相关的功能，本来想自己写，忽然想起来之前在轮子工厂有更新过，vue-dragging还是很好用滴。

介绍

vue-dragging -- 一款可任意拖动排序的vue插件。支持桌面和移动端，拖拽过渡动画美观。支持vue1和vue2版本。非常实用。

安装

通过NPM安装

$ npm install awe-dnd --save

插件应用

在main.js中，通过Vue.use导入插件

import VueDND from "awe-dnd"

Vue.use(VueDND)

在你的vue文件中这样引用

vue2.0的使用方式


    {{color.text}}

vue1.0的使用方式


    {{color.text}}

添加事件


    {{color.text}}

export default {
  mounted () {
    this.$dragging.$on("dragged", ({ value }) => {
      console.log(value.item)
      console.log(value.list)
      console.log(value.otherData)
    })
    this.$dragging.$on("dragend", () => {
        
    })
  }
}

轮子工厂--一个分享vue,angular优秀组件的网站

云服务器 GPU云服务器可用于 linux可用于进程可拖动表格服务器可用于多个

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84696.html

iView 发布 3.0 版本，以及开发者社区等 5 款新产品

摘要：相对时间组件锚点组件面板分割组件分割线组件单元格组件相对时间组件用于表示几分钟前几小时前等相对于此时此刻的时间描述。单元格组件在手机上比较常见，在上则常用于固定的侧边菜单项。开发者社区这是发布会最劲爆的一款产品了。 showImg(https://segmentfault.com/img/bVbeuj6?w=2864&h=1458); 7 月 28 日，我们成功地召开了 iView 3...

FreeZinG 2019-08-23 10:31 评论0 收藏0
使用 Drag and Drop 给Web应用提升交互体验

摘要：注意点在鼠标操作拖放期间，有一些事件可能触发多次，比如和。可拖拽元素，建议使用，设定可拖拽元素的鼠标游标，提升交互。在中使用拖拽中使用可以直接绑定到组件上。什么是 Drag and Drop （拖放）？简单来说，HTML5 提供了 Drag and Drop API，允许用户用鼠标选中一个可拖动元素，移动鼠标拖放到一个可放置到元素的过程。我相信每个人都或多或少接触过拖放，比如浏览...

legendmohe 2019-08-02 12:03 评论0 收藏0
通过拖动列表，重新获取列表的排序

摘要：文章首发在我的个人博客上有这样一个列表需要拖动列表，改变顺序，并把新的顺序保存下来传给后端。实现实现方法如下是当前元素下标，是拖动到的位置下标。文章首发在我的个人博客上有这样一个列表： showImg(https://segmentfault.com/img/remote/1460000019484737?w=498&h=528); 需要拖动列表，改变顺序，并把新的顺序保存下来传...

whinc 2019-08-23 18:07 评论0 收藏0
实现平滑过渡的拖拽排序

摘要：将元素由拖拽开始的地方移到拖拽结束地方，这期间，目标元素和目标元素周围的元素要怎么平滑过渡到新的位置。最近重读Vue官方文档，在列表的排序过渡这一小节，文档提到，组件有一个特殊的地方，不仅可以实现进入和离开动画，还可以改变定位，官网示例如下：showImg(https://segmentfault.com/img/bVbtMTM?w=634&h=424); 例子中实现的效果看起来还...

chengjianhua 2019-08-30 11:09 评论0 收藏0