surmon-china/vue-drag-zone

Drag Zone component for @vuejs

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>

vue-drag-zone's Issues

请问有拖拽的例子嘛

疑问

BUG REPORT TEMPLATE

轮子工厂demo

Reproduction Link

demo链接

浏览器： chrome 版本 69.0.3497.100

Steps to reproduce

（以水平demo为例）

1. 先选中区块中的文本;

2.点击分割线，并按住鼠标不放，鼠标左右不移动的前提下，上下移动鼠标，直至出现禁止icon;

3.松开鼠标；

4.随意移动鼠标，出现拖拽效果。

What is Expected?

1.鼠标松开后，移动鼠标不会出现拖拽效果

What is actually happening?

问题

不知道是否能提供移动时的回调函数

下载下来为什么不是 vue-drag-zone的呢？

下载下来为什么不是 vue-drag-zone的呢？

中文用户注意：

1. 尽量用英文描述你的 issue
2. 不要把内容堆彻在标题上，逻辑清晰地写在内容区
3. 贴代码要提前格式化好，有颜色高亮那种，贴文本，不要贴图片
4. 提问题前，必须仔细阅读 REMADE.md + 在已关闭的问题中寻找与自身相关的问题，90% 的可能它已经被解决
5. 如果无法做到提一个合格、优秀的问题，则问题会被 close + block

BUG REPORT TEMPLATE

Vue.js version and component version

Reproduction Link

• A minimal JSBin, JSFiddle, Codepen, or a GitHub repository that can reproduce the bug.
• You could start with this template: https://jsfiddle.net/39epgLj0/

Steps to reproduce

What is Expected?

What is actually happening?