分享一個可用于拖動排序的vue組件

MasonEast 發布于2019-08-20 18:34 / 1591人閱讀

摘要：最近要做拖拽相關的功能，本來想自己寫，忽然想起來之前在輪子工廠有更新過，還是很好用滴。介紹一款可任意拖動排序的插件。支持桌面和移動端，拖拽過渡動畫美觀。

最近要做拖拽相關的功能，本來想自己寫，忽然想起來之前在輪子工廠有更新過，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可用于進程可拖動表格服務器可用于多個

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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