Skip to content
This repository has been archived by the owner on May 9, 2022. It is now read-only.

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
unknown committed Dec 21, 2016
1 parent 701b994 commit 496c54d
Show file tree
Hide file tree
Showing 12 changed files with 947 additions and 0 deletions.
38 changes: 38 additions & 0 deletions .npmignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
# Logs
logs
*.log
npm-debug.log*

# Runtime data
pids
*.pid
*.seed

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules
examples
jspm_packages

# Optional npm cache directory
.npm

# Optional REPL history
.node_repl_history
21 changes: 21 additions & 0 deletions LICENSE
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2016 Surmon

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
94 changes: 94 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
[![GitHub issues](https://img.shields.io/github/issues/surmon-china/vue-drag-zone.svg?style=flat-square)](https://github.com/surmon-china/vue-drag-zone/issues)
[![GitHub forks](https://img.shields.io/github/forks/surmon-china/vue-drag-zone.svg?style=flat-square)](https://github.com/surmon-china/vue-drag-zone/network)
[![GitHub stars](https://img.shields.io/github/stars/surmon-china/vue-drag-zone.svg?style=flat-square)](https://github.com/surmon-china/vue-drag-zone/stargazers)
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/surmon-china/vue-drag-zone/master/LICENSE)
[![Twitter](https://img.shields.io/twitter/url/https/github.com/surmon-china/vue-drag-zone.svg?style=social?style=flat-square)](https://twitter.com/intent/tweet?text=Wow:&url=%5Bobject%20Object%5D)

[![NPM](https://nodei.co/npm/vue-drag-zone.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-drag-zone/)


# Vue-Drag-Zone
Drag Zone component for Vue.js(2.x)，适用于Vue2的dom拖动组件。


# Example
[Demo Page](https://surmon-china.github.io/vue-drag-zone/)


# Use Setup


### Install vue-drag-zone

``` bash
npm install vue-drag-zone --save
```

``` javascript
// import with ES6
import Vue from 'vue'
import VueDragZone from 'vue-drag-zone'


// require with Webpack/Node.js
const Vue = require('vue')
const VueDragZone = require('vue-drag-zone')


// use
Vue.use(VueDragZone)

// or use with component(ES6)
import Vue from 'vue'
import { dragZone, dragHandle } from 'vue-drag-zone'

// use
export default {
components: {
dragZone,
dragHandle
}
}
```

``` html
<!-- use with components -->
<drag-zone class="zone">
<div class="item i1">item1</div>
<drag-handle class="handle">H</drag-handle>
<div class="item i2">item2</div>
<drag-handle class="handle">H</drag-handle>
<div class="item i3">item3</div>
<drag-handle class="handle">H</drag-handle>
<div class="item i4">item4</div>
<drag-handle class="handle">H</drag-handle>
<div class="item i5">item5</div>
</drag-zone>

<!-- disabled handle -->
<drag-zone class="zone">
<div class="item i1">item1</div>
<drag-handle class="handle">H</drag-handle>
<div class="item i2">item2</div>
<drag-handle class="handle">H</drag-handle>
<div class="item i3">item3</div>
<div class="item i4">item4</div>
<drag-handle class="handle" disabled>H</drag-handle>
<div class="item i5">item5</div>
</drag-zone>

<!-- min width and max width -->
<drag-zone class="zone">
<div class="item i1" style="min-width: 100px;max-width: 300px;">min 100px && max 300px</div>
<drag-handle class="handle">H</drag-handle>
<div class="item i2">item2</div>
<drag-handle class="handle">H</drag-handle>
<div class="item i3">item3</div>
<div class="item i4" style="min-width: 50px;">min 50px</div>
<drag-handle class="handle" disabled>H</drag-handle>
<div class="item i5" style="min-width: 100px;">min 100px</div>
</drag-zone>
```

# Author Blog
[Surmon](http://surmon.me)
77 changes: 77 additions & 0 deletions examples/01-example.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<template>
<md-card>
<md-card-actions v-md-ink-ripple>
<div class="md-subhead">
<span>Base Example</span>
</div>
<md-button class="md-icon-button"
target="_blank"
href="https://github.com/surmon-china/vue-drag-zone/tree/master/examples/01-example.vue">
<md-icon>code</md-icon>
</md-button>
</md-card-actions>
<md-card-media>
<!-- drag-zone -->
<drag-zone class="zone">
<div class="item i1">item1</div>
<drag-handle class="handle">H</drag-handle>
<div class="item i2">item2</div>
<drag-handle class="handle">H</drag-handle>
<div class="item i3">item3</div>
<div class="item i4">item4</div>
<drag-handle class="handle" disabled>H</drag-handle>
<div class="item i5">item5</div>
</drag-zone>
</md-card-media>
</md-card>
</template>

<script>
export default {
data() {
return {
}
}
}
</script>

<style scoped>
.zone {
width: 100%;
height: 180px;
line-height: 180px;
margin: 0 auto;
position: relative;
clear: both;
text-align: center;
color: white;
background: #eee;
display: flex;
justify-content: space-between;
}
.zone .handle {
width: 10px;
height: 180px;
background: #2196f3;
}
.zone .item {
width: calc((100% - 30px) / 4);
height: 180px;
overflow: hidden;
}
.zone .item.i1 {
background: #999;
}
.zone .item.i2 {
background: #777;
}
.zone .item.i3 {
background: #555;
}
.zone .item.i4 {
background: #333;
}
.zone .item.i5 {
background: #000;
}
</style>
83 changes: 83 additions & 0 deletions examples/02-example.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<template>
<md-card>
<md-card-actions v-md-ink-ripple>
<div class="md-subhead">
<span>Disabled Example</span>
</div>
<md-button class="md-icon-button"
target="_blank"
href="https://github.com/surmon-china/vue-drag-zone/tree/master/examples/02-example.vue">
<md-icon>code</md-icon>
</md-button>
</md-card-actions>
<md-card-media>
<!-- drag-zone -->
<drag-zone class="zone">
<div class="item i1">item1</div>
<drag-handle class="handle">H</drag-handle>
<div class="item i2">item2</div>
<div class="item i3">item3</div>
<drag-handle class="handle">H</drag-handle>
<div class="item i4">item4</div>
<drag-handle class="handle" :disabled="disabledHandle">H</drag-handle>
<div class="item i5">item5</div>
</drag-zone>
</md-card-media>
</md-card>
</template>

<script>
export default {
data() {
return {
disabledHandle: true
}
},
mounted() {
setInterval(() => {
this.disabledHandle = !this.disabledHandle
}, 5000)
}
}
</script>

<style scoped>
.zone {
width: 100%;
height: 180px;
line-height: 180px;
margin: 0 auto;
position: relative;
clear: both;
text-align: center;
color: white;
background: #eee;
display: flex;
justify-content: space-between;
}
.zone .handle {
width: 10px;
height: 180px;
background: #2196f3;
}
.zone .item {
width: calc((100% - 30px) / 4);
height: 180px;
overflow: hidden;
}
.zone .item.i1 {
background: #999;
}
.zone .item.i2 {
background: #777;
}
.zone .item.i3 {
background: #555;
}
.zone .item.i4 {
background: #333;
}
.zone .item.i5 {
background: #000;
}
</style>
81 changes: 81 additions & 0 deletions examples/03-example.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<template>
<md-card>
<md-card-actions v-md-ink-ripple>
<div class="md-subhead">
<span>MinWdith and MaxWidth Example</span>
</div>
<md-button class="md-icon-button"
target="_blank"
href="https://github.com/surmon-china/vue-drag-zone/tree/master/examples/03-example.vue">
<md-icon>code</md-icon>
</md-button>
</md-card-actions>
<md-card-media>
<!-- drag-zone -->
<drag-zone class="zone">
<div class="item i1">min 100px && max 300px</div>
<drag-handle class="handle">H</drag-handle>
<div class="item i2">item2</div>
<drag-handle class="handle">H</drag-handle>
<div class="item i3">item3</div>
<div class="item i4">min 50px</div>
<drag-handle class="handle" disabled>H</drag-handle>
<div class="item i5">min 100px</div>
</drag-zone>
</md-card-media>
</md-card>
</template>

<script>
export default {
data() {
return {
}
}
}
</script>

<style scoped>
.zone {
width: 100%;
height: 180px;
line-height: 180px;
margin: 0 auto;
position: relative;
clear: both;
text-align: center;
color: white;
background: #eee;
display: flex;
justify-content: space-between;
}
.zone .handle {
width: 10px;
height: 180px;
background: #2196f3;
}
.zone .item {
width: calc((100% - 30px) / 4);
height: 180px;
overflow: hidden;
}
.zone .item.i1 {
min-width: 100px;
max-width: 300px;
background: #999;
}
.zone .item.i2 {
background: #777;
}
.zone .item.i3 {
background: #555;
}
.zone .item.i4 {
min-width: 50px;
background: #333;
}
.zone .item.i5 {
min-width: 100px;
background: #000;
}
</style>
Loading

0 comments on commit 496c54d

Please sign in to comment.