-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
147 lines (137 loc) · 7.36 KB
/
demo.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
145
146
147
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DNDX.JS DEMO - JavaScript Drag and Drop Library</title>
<meta name="description" content="DNDX.JS is a high level drag and drop JavaScript library running on top of jQuery & jQuery UI. It can make you quickly integrate drag and drop features to your app.">
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/south-street/jquery-ui.css">
<link rel="stylesheet" href="css/dndx.css">
<link rel="stylesheet" href="demo/styles.css">
<link rel="stylesheet" href="demo/animate.min.css">
<script src="https://code.jquery.com/jquery-1.12.0.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="js/dndx.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#intro">Intro</a></li>
<li><a href="#basic">Demo - Basic</a></li>
<li><a href="#list">Demo - List</a></li>
</ul>
<div id="intro">
<div class="links">
<a href="https://github.com/suewonjp/DNDX.JS"><span class="fa fa-github fa-lg link"> Github Page</span></a>
<a href="https://github.com/suewonjp/DNDX.JS/blob/master/api-docs.md"><span class="fa fa-book fa-lg link"> API Docs</span></a>
<a href="https://github.com/suewonjp/DNDX.JS/wiki"><span class="fa fa-file-word-o fa-lg link"> Wiki Page</span></a>
</div>
<div class="flex-container">
<!--[if lte IE 9]>
<h1 style="color:red">This demo doesn't support IE 9 or earlier versions of IE</h1>
<![endif]-->
<div class="summary">
<p><a href="https://github.com/suewonjp/DNDX.JS">DNDX.JS</a> is a JavaScript library enhancing Drag & Drop User Interface Interactions for your web page.</p>
<p>Main concern of <a href="https://github.com/suewonjp/DNDX.JS">DNDX.JS</a> is providing you <em><strong>HIGHER LEVEL</strong></em> Drag & Drop features while delegating most of its lower level Drag & Drop functions to jQuery UI's <a href="http://api.jqueryui.com/draggable/">Draggable</a> and <a href="http://api.jqueryui.com/droppable/">Droppable</a> Widgets.</p>
<pre><code>dndx(".draggable", ".droppable")
.visualcue("Exterior")
.onstart(onStartCallback)
.onconflict(onConflictCallback)
.onover(onOverCallback)
.ondrop(onDropCallback);
</code></pre>
<p>Please, click the tabs above for demo pages to check out what <a href="https://github.com/suewonjp/DNDX.JS">DNDX.JS</a> can do.</p>
<p>Also, check out the <a href="https://github.com/suewonjp/DNDX.JS/blob/master/api-docs.md">API documentation</a>. It has more detailed discussion about what the library looks like.</p>
</div>
<div class="animation">
<h2>Drag the envelope into the trash can</h2>
<div class="fa fa-envelope fa-2x"></div>
<div class="fa fa-trash fa-4x" title="Successfully Removed"></div>
</div>
</div>
</div> <!--"intro"-->
<div id="basic">
<div class="header">
<div class="menu-container">
<h2>Select Visualcue</h2>
<select id="basic-visualcue-menu">
<option>Overlay</option>
<option>Swing</option>
<option>Exterior</option>
<option>Underline</option>
<option>Arrow</option>
<option>Nothing</option>
</select>
</div>
</div>
<table>
<tr>
<td><div class="droppable row1 col1">Row 1, Col 1<br>(Drop Here)</div></td>
<td><div class="droppable row1 col2">Row 1, Col 2<br>(Drop Here)</div></td>
<td><div class="droppable row1 col3">Row 1, Col 3<br>(Drop Here)</div></td>
<td><input type="checkbox" class="check-to-reject-row"/>Can't Drop This Row</td>
</tr>
<tr>
<td><div class="droppable row2 col1">Row 2, Col 1<br>(Drop Here)</div></td>
<td><div class="droppable row2 col2">Row 2, Col 2<br>(Drop Here)</div></td>
<td><div class="droppable row2 col3">Row 2, Col 3<br>(Drop Here)</div></td>
<td><input type="checkbox" class="check-to-reject-row"/>Can't Drop This Row</td>
</tr>
<tr>
<td><div class="droppable row3 col1">Row 3, Col 1<br>(Drop Here)</div></td>
<td><div class="droppable row3 col2">Row 3, Col 2<br>(Drop Here)</div></td>
<td><div class="droppable row3 col3">Row 3, Col 3<br>(Drop Here)</div></td>
<td><input type="checkbox" class="check-to-reject-row"/>Can't Drop This Row</td>
</tr>
</table>
<br/><hr/>
<div>
<button id="basic-new-src-btn"><span class="ui-icon ui-icon-plus"></span></button>
<a href="#" id="basic-dialog-link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a>
<br/><br/>
<div id="draggable0" class="draggable"><span>0 (Drag Me)</span></div>
<div id="draggable1" class="draggable"><span>1 (Drag Me)</span></div>
</div>
<div id="basic-dialog" title="Dialog">
<p>Drop Here!<br>Drop Here!<br>Drop Here!</p>
<br/>
<input type="checkbox"/>Do Not Resolve Conflict
</div>
</div> <!--"basic"-->
<div id="list">
<div class="flex-container">
<h3>The Programming Languages You Like (You can change the order)</h3>
<h3>The Programming Languages You Don't Like</h3>
<h3>Throw Away Languages You Really Hate</h3>
</div>
<div class="flex-container">
<div class="pl-list-container ui-corner-all">
<ol>
<li>JavaScript</li>
<li>Java</li>
<li>C++</li>
<li>Objective C</li>
<li>C</li>
<li>Ruby</li>
<li>Python</li>
<li>PHP</li>
<li>Groovy</li>
<li>Scala</li>
</ol>
</div>
<div class="pl-list-container ui-corner-all">
<ul>
</ul>
</div>
<div class="trashcan-container">
<div class="fa fa-trash fa-3x" title="Successfully Removed"></div>
</div>
</div>
</div> <!--"list"-->
</div> <!--<div id="tabs">-->
<script src="demo/basic.js"></script>
<script src="demo/list.js"></script>
<script src="demo/index.js"></script>
</body>
</html>