• This repository has been archived on 09/May/2022
  • Stars
    star
    129
  • Rank 279,262 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 8 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Drag Zone component for @vuejs

GitHub stars Travis GitHub issues GitHub forks GitHub last commit license

NPM NPM

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>

More Repositories

1

vue-awesome-swiper

🏆 Swiper component for @vuejs
JavaScript
12,800
star
2

vue-quill-editor

@quilljs editor component for @vuejs(2)
JavaScript
7,368
star
3

videojs-player

@videojs player component for @vuejs(3) and React.
TypeScript
5,203
star
4

vue-codemirror

@codemirror code editor component for @vuejs
TypeScript
3,217
star
5

surmon.me

🌱 My digital garden, powered by myself.
Vue
2,091
star
6

nodepress

🟢 RESTful API service for https://surmon.me blog, powered by @nestjs
TypeScript
1,422
star
7

surmon.me.native

📱 My blog app, powered by react-native
TypeScript
620
star
8

vue-touch-ripple

A ink-ripple effect component for @vuejs
TypeScript
480
star
9

angular-admin

🔏 Admin client for surmon.me blog powered by @angular and Bootstrap4
TypeScript
354
star
10

simple-netease-cloud-music

🎵 A simple netease music api lib. 简单、统一、轻巧的 Node.js 版网易云音乐 API
TypeScript
272
star
11

ngx-quill-editor

🍡@quilljs editor component for @angular
TypeScript
232
star
12

surmon-china.github.io

My GitHub repositories homepage.
Vue
221
star
13

naivebayes

NaiveBayes classifier for JavaScript
JavaScript
142
star
14

surmon.admin

🔏 Admin client for surmon.me blog, powered by React & @veactjs
TypeScript
61
star
15

mongodb-data-api

MongoDB Atlas Data API SDK for @nodejs
TypeScript
40
star
16

emoji-233333

😂 2333333
JavaScript
38
star
17

sre.surmon.me

💻 SRE service for Surmon.me blog.
HTML
34
star
18

vue2any

把 vue 组件转换为任何 web 类模板
JavaScript
33
star
19

wonderful-bing-wallpaper

🌅 Simple bing daily wallpaper API lib for Node.js.
TypeScript
31
star
20

vuniversal

[WIP] Create vue (3) universal web applications quickly by @vitejs.
TypeScript
19
star
21

surmon-china

About me
JavaScript
16
star
22

wordpress-theme-one

🎨 A blog theme for @wordpress
CSS
16
star
23

libundler

📦 Universal JavaScript library bundler, powered by @rollup.
TypeScript
14
star
24

developer-code-guide

🗒Developer code guide.
12
star
25

README.vue

Design your README.md by @vuejs component.
Vue
11
star
26

wordpress-theme-surmon

🎨 A blog theme for @wordpress
PHP
10
star
27

surmon.me.flutter

📱 My blog app powered by @flutter (The repositorie has been deprecated)
Dart
9
star
28

wordpress-theme-metro

🎨 A blog theme for @wordpress
PHP
9
star
29

javascript-gobang

⚫Javascript gobang game
HTML
9
star
30

nurse.js

My lib.
JavaScript
9
star
31

jquery-dragZone

jQuery 拖拽改变div大小效果
HTML
7
star
32

better-itg-flat-dark-vscode-theme

Better itg.flat.dark theme for vscode. Base on Sublime Text
7
star
33

wordpress-theme-think

🎨 A cms theme for @wordpress
PHP
7
star
34

coolcut

cool cut psd file
JavaScript
5
star
35

chrome-tmall-rate-thumb-extend

⚾️ 增加在天猫商品评价页显示原图及图片旋转操作功能
JavaScript
5
star
36

action-ssl-cert-expiry-checker

Check SSL certificate expiry time for your domains
JavaScript
3
star
37

ifttt

IFTTT SPACE
1
star
38

.github

GitHub
1
star