Vue.js的拖放功能– dnd-zone

Vue.js的拖放功能– dnd-zone
插件名称 vue-dnd-zone
发布时间 2021年3月17日
插件作者 supraniti

dnd-zone是Vue.js的拖放库,可让您在Vue.js应用程序中创建可拖动元素(如列表,网格)。

安装和下载:

# Yarn
$ yarn add vue-dnd-zone

# NPM
$ npm i vue-dnd-zone

特征:

  • 平稳过渡
  • 拖动时自动滚动
  • 支持嵌套结构
  • 轻量级(〜4kb gzip压缩)
  • 支持触摸事件

如何使用它:

1.导入dnd-zone组件。

import VueDndZone from 'vue-dnd-zone'
import 'vue-dnd-zone/vue-dnd-zone.css'

2.将可拖动的项目添加到dnd区域。

<dnd-zone>
  <dnd-container>
    <dnd-item>
      <!-- item markup goes here -->
    </dnd-item>
  </dnd-container>
</dnd-zone>

3.可能的道具。

validate:{
  type: Function,
  default: function(item, container, zone){
    if(item && container && zone){
      return true
    }
  }
},
mirrorMinHeight:{
  type: Number,
  default: 150,
},
mirrorMaxWidth:{
  type: Number,
  default: 500,
},
calcInterval:{
  type: Number,
  default: 150,
},
lockDistance:{
  type: Number,
  default: 25,
},
shadowAnchor:{
  type: Function,
  default: function(){
    return this.$el
  }
},
mirrorAnchor:{
  type: Function,
  default: function(){
    return this.$el
  }
},
transitionDuration:{
  type: Number,
  default: 0.2,
},
shadowOpacity:{
  type: Number,
  default: 0.5,
},
shadowMargin:{
  type: [Boolean, String],
  default: '0px',
},
shadowPadding:{
  type: [Boolean, String],
  default: false,
},
dragstartBuffer: {
  type: Number,
  default: 50,
},
nativeScroll: {
  type: Boolean,
  default: true,
},
handleClass:{
  type: [Boolean,String],
  default: false
},
pushToLast:{
  type: Boolean,
  default: false
}