vue-drag-zone

WebJar for vue-drag-zone

License	MIT
GroupId	org.webjars.npm
ArtifactId	vue-drag-zone
Last Version	1.2.2
Release Date	Nov 27, 2017
Type	jar
Description	vue-drag-zone WebJar for vue-drag-zone
Project URL	http://webjars.org
Source Code Management	https://github.com/surmon-china/vue-drag-zone

Download vue-drag-zone

Filename	Size
vue-drag-zone-1.2.2.pom
vue-drag-zone-1.2.2.jar	15 KB
vue-drag-zone-1.2.2-sources.jar	22 bytes
vue-drag-zone-1.2.2-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/vue-drag-zone/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>vue-drag-zone</artifactId>
    <version>1.2.2</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/vue-drag-zone/
implementation 'org.webjars.npm:vue-drag-zone:1.2.2'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/vue-drag-zone/
implementation ("org.webjars.npm:vue-drag-zone:1.2.2")

Apache Buildr

'org.webjars.npm:vue-drag-zone:jar:1.2.2'

Apache Ivy

<dependency org="org.webjars.npm" name="vue-drag-zone" rev="1.2.2">
  <artifact name="vue-drag-zone" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='vue-drag-zone', version='1.2.2')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "vue-drag-zone" % "1.2.2"

Leiningen

[org.webjars.npm/vue-drag-zone "1.2.2"]

Dependencies

compile (1)

Group / Artifact	Type	Version
org.webjars.npm : jquery	jar	[3.1.1,4)

Project Modules

There are no modules declared in this project.

Vue-Drag-Zone

Drag Zone component for Vue. 适用于 Vue 的 DOM 拖动组件。

Example

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

Versions

Version
1.2.2 Nov 27, 2017