分享一個功能強大的vue.js拖拽組件

stefan 發布于2019-08-26 11:34 / 825人閱讀

摘要：介紹這是一個功能強大的可拖拽的組件。它可以自動滾動，鎖定坐標系。支持拖拽時，流暢的動畫效果。可以支持水平，垂直或者網格的拖拽。

介紹

vue-slicksort -- 這是一個功能強大的可拖拽的vue.js組件。它可以自動滾動，鎖定坐標系。支持拖拽時，流暢的動畫效果。可以支持水平，垂直或者網格的拖拽。支持觸摸。

DEMO

安裝

通過npm安裝

$ npm install vue-slicksort --save

通過yarn安裝

$ yarn add vue-slicksort

插件應用

引入組件

// Using an ES6 transpiler like Babel
import {ContainerMixin, ElementMixin} from "vue-slicksort";

// Not using an ES6 transpiler
var slicksort = require("vue-slicksort");
var ContainerMixin = slicksort.ContainerMixin;
var ElementMixin = slicksort.ElementMixin;

在你的vue文件中這樣引用

import Vue from "vue";
import { ContainerMixin, ElementMixin } from "vue-slicksort";

const SortableList = {
  mixins: [ContainerMixin],
  template: `
    
      
    
  `,
};

const SortableItem = {
  mixins: [ElementMixin],
  props: ["item"],
  template: `
    {{item}}
  `,
};

const ExampleVue = {
  name: "Example",
  template: `
    
      
        
      
    
  `,
  components: {
    SortableItem,
    SortableList,
  },
  data() {
    return {
      items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8"],
    };
  },
};

const app = new Vue({
  el: "#root",
  render: (h) => h(ExampleVue),
});

組件參數

Property	Type	Default	Description
value	Array	-	列表的內容
axis	String	y	列表元素可以被橫向拖拽，縱向拖拽還是網格拖拽。用x,y,xy來表示。
lockAxis	String	-	用于排序時在坐標系中鎖定元素的移動
helperClass	String	-	helper的自定義樣式類
transitionDuration	Number	300	元素移動動畫的持續時間
pressDelay	Number	0	如果需要當元素被按下一段時間再允許拖拽，可以設置這個屬性
pressThreshold	Number	5	移動允許被忽略的閾值，單位是像素
distance	Number	0	如果需要在拖拽出一定距離之后才被識別為正在拖拽的元素，可以設置這個屬性
useDragHandle	Boolean	false	如果使用HandleDirective，設置為true
useWindowAsScrollContainer	Boolean	false	是否設置window為可滾動的容器
hideSortableGhost	Boolean	false	是否設置window為可滾動的容器
useWindowAsScrollContainer	Boolean	true	是否自動隱藏ghost元素
lockToContainerEdges	Boolean	false	是否對正在拖拽的元素鎖定容器邊緣
lockOffset	String	50%	對正在拖拽的元素鎖定容器邊緣的偏移量
shouldCancelStart	Function	-	在拖拽開始前這個方法將被調用
getHelperDimensions	Function	-	可選方法({node, index, collection}),用于返回SortableHelper的計算尺寸

輪子工廠--一個分享vue,angular優秀組件的網站

云服務器 GPU云服務器拖拽組件組件拖拽分享組件一個好的防火墻應具備哪些功能

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107164.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
手把手教你寫vue裁切預覽組件

摘要：版本裁切工具，包含預覽功能最終效果源碼地址第一步先用安裝腳手架不會安裝的看官網初始化第二步創建文件新建里新建，在配置訪問路由具體看源碼最終生成的文件結構如下圖第三步注冊組件引用所有插件導入插件入口文件如果已安裝就跳過注冊插件全 vue版本裁切工具，包含預覽功能最終效果： https://qiuyaofan.github.io/vue-crop-demo/ 源碼地址： https:/...

FreeZinG 2019-08-22 17:02 評論0 收藏0
觀眾老爺們，來試試這個用 Vue 擼的數據可視化后臺吧

摘要：至于如何優雅地管理使用，再次祭出潘神的文章手摸手，帶你優雅的使用掘金項目的后端接口文檔我是用的進行的管理，其實有很多強大的功能，不僅僅是一個接口測試工具，接口文檔管理就是其中一個。首先放個線上地址大家感受一下(由于后端用的是 leancloud 的免費套餐，因此可能會比較慢)： vue-data-board P.S. 建議大家盡量自己注冊一個賬號(可以隨便填一個密碼)，如果用默認的測...

JinB 2019-08-23 18:12 評論0 收藏0
前端每周清單：Node.js 微服務實踐，Vue.js 與 GraphQL，Angular 組件技巧

摘要：前端每周清單第期微服務實踐，與，組件技巧，攻防作者王下邀月熊編輯徐川前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。前端每周清單第 26 期：Node.js 微服務實踐，Vue.js 與 GraphQL，Angular 組件技巧，HeadlessChrome 攻防作者：王下邀月熊編輯：徐川...

wall2flower 2019-08-21 11:55 評論0 收藏0
前端最實用書簽(持續更新)

摘要：前言一直混跡社區突然發現自己收藏了不少好文但是管理起來有點混亂所以將前端主流技術做了一個書簽整理不求最多最全但求最實用。前言一直混跡社區,突然發現自己收藏了不少好文但是管理起來有點混亂; 所以將前端主流技術做了一個書簽整理,不求最多最全,但求最實用。書簽源碼書簽導入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 評論0 收藏0