😎Drag Zone component for @vuejs
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.github update Dec 24, 2017
config update Dec 24, 2017
dist update Dec 24, 2017
examples update Dec 24, 2017
src update Dec 24, 2017
.babelrc update Dec 24, 2017
.eslintignore update Dec 24, 2017
.eslintrc.js update Dec 24, 2017
.gitignore update Dec 24, 2017
.npmignore update Dec 24, 2017
.travis.yml update Dec 24, 2017
CHANGELOG.md update Dec 24, 2017
LICENSE Update Apr 27, 2017
README.md update Dec 24, 2017
package.json update Dec 24, 2017

README.md

GitHub stars Travis GitHub issues GitHub forks GitHub last commit license Twitter

NPM NPM

Vue-Drag-Zone

Drag Zone component for Vue.

适用于 Vue 的 DOM 拖动组件。

Example

Demo Page

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 --save

Mount

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>

Author

Surmon