forked from sagalbot/vue-sortable
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
144 lines (120 loc) · 4.95 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VueJS Sortable</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/themes/prism-tomorrow.min.css">
<style>
/* green: #7ec699
* black: #2d2d2d
* purple: #cc99cd
* teal: #67cdcc
*/
.btn {
border: 2px solid;
}
footer a,
footer a:hover,
.jumbotron a,
.jumbotron a:hover {
color: #cc99cd;
}
footer, .jumbotron {
margin-bottom: 0;
background: #2d2d2d;
color: #67cdcc;
}
footer {
margin-top: 1em;
padding: 1em 0;
color: #ccc;
}
.handle {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
float: right;
}
.handle:hover {
cursor: pointer;
}
.handle:before {
content: "\e068";
}
.sortable-ghost {
background: #efefef;
}
</style>
</head>
<body>
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-2">
<h1>Vue.js Sortable</h1>
<p class="lead">Easily add drag-and-drop sorting to your Vue.js applications without jQuery, using the
v-sortable directive, a thin wrapper for the minimalist
<a href="https://github.com/RubaXa/Sortable">SortableJS</a> library.</p>
<a href="https://github.com/sagalbot/vue-sortable" class="btn btn-lg">View on GitHub</a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="page-header">Installation & Usage</h2>
<h5>Install using NPM</h5>
<pre><code class="language-bash">npm install vue-sortable</code></pre>
<h5>Setup</h5>
<pre><code class="language-javascript">import Vue from 'vue'
import Sortable from 'vue-sortable'
Vue.use(Sortable)</code></pre>
<p>Note that if you are not compiling Vue yourself, you just need to include
<code><script src="path/to/vue-sortable.js></code>, and the plugin will be attached to the window at
<code>window.vSortable</code>. In this case, you don't need to call
<code>Vue.use()</code>.</p>
<h2 class="page-header">Examples</h2>
<h4>Basic</h4>
<basic></basic>
<h4>Access the Sortable Instance</h4>
<div class="row">
<div class="col-md-4">
<p>If you need to access the sortable instance itself, you can do so by providing an identifier argument to the directive with the <code>:</code> syntax.</p>
<p>In this example, you could access the sortable instance from within your vm via <code>this.sortable.list</code>.</p>
</div>
<div class="col-md-8">
<pre v-pre><code class="language-markup"><ul class="list-group" v-sortable:list>
<li class="list-group-item">Foo</li>
<li class="list-group-item">Bar</li>
<li class="list-group-item">Baz</li>
</ul></code></pre>
</div>
</div>
<h4>Further Customization</h4>
<p>Any arguments that can be passed to
<code>new Sortable(el, {})</code> can also be passed to the directive using an object literal. Check the
<a href="https://github.com/RubaXa/Sortable#options">Sortable docs</a> for a complete list of arguments. In this example a custom drag handle has been set.
</p>
<custom></custom>
<p>If you need to pass multiple arguments, it can be cleaner to bind to an object from your VM data. The same drag handles are applied here, while also disabling drag on
<code>.disabled</code> items.</p>
<data></data>
</div>
</div>
</div>
<footer>
<div class="container text-center">
<small>Free to Use Under The MIT License (MIT) | Created by <a href="http://github.com/sagalbot">@sagalbot</a></small>
</div>
</footer>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/prism.min.js"></script>
<script src="demo/dist/build.js"></script>
</body>
</html>