Vue-Drag-Zone
Drag Zone component for Vue. 适用于 Vue 的 DOM 拖动组件。
Example
Install
CDN
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-drag-zone.js"></script>
<script type="text/javascript">
Vue.use(window.VueDragZone)
</script>NPM
npm install vue-drag-zone --saveMount
mount with global
import Vue from 'vue'
import VueDragZone from 'vue-drag-zone'
Vue.use(VueDragZone)mount with component
import { dragZone, dragHandle, dragContent } from 'vue-drag-zone'
export default {
components: {
dragZone,
dragHandle,
dragContent
}
}component
<template>
<!-- base use -->
<drag-zone class="zone">
<drag-content class="content c1">
<div class="item i1">item 1</div>
</drag-content>
<drag-handle class="handle"></drag-handle>
<drag-content class="content c2">
<div class="item i2">item 2</div>
</drag-content>
<drag-handle class="handle"></drag-handle>
<drag-content class="content c3">
<div class="item i3">item 3</div>
</drag-content>
<drag-content class="content c4">
<div class="item i4">item 4</div>
</drag-content>
<drag-handle class="handle"></drag-handle>
<drag-content class="content c5">
<div class="item i5">item 5</div>
</drag-content>
<!-- disabled handle -->
<drag-zone class="zone">
<drag-content class="content c1">
<div class="item i1">item 1</div>
</drag-content>
<drag-handle class="handle"></drag-handle>
<drag-content class="content c2">
<div class="item i2">item 2</div>
</drag-content>
<drag-content class="content c3">
<div class="item i3">item 3</div>
</drag-content>
<drag-handle class="handle"></drag-handle>
<drag-content class="content c4">
<div class="item i4">item 4</div>
</drag-content>
<drag-handle class="handle" :disabled="disabledHandle"></drag-handle>
<drag-content class="content c5">
<div class="item i5">item 5</div>
</drag-content>
</drag-zone>
</template>