Vue-Drag-Zone
Drag Zone component for Vue.
适用于 Vue 的 DOM 拖动组件。
Example
Install
CDN
NPM
npm install vue-drag-zone --save
Mount
mount with global
Vue
mount with component
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>