jquerypp/event/drag/drag.html at docs · Yesplan/jquerypp · GitHub

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>drag</title>
        <style type='text/css'>
            body {font-family: verdana}
			.handle {
				width: 300px;
				height: 25px;
				border: dashed 1px red;
				cursor : pointer;
			}
			.revert {
				float: left;
			}
			.big {
				height: 100px;
			}
			#container {
				padding: 20px;
				border: dashed 2px green;
			}
			#representative {
				width: 100px;
				height: 60px;
				border: solid 1px blue;
				cursor: pointer;
			}
			#scrollarea ul li {height: 40px; border: solid 1px gray; font-size: 25px;list-style: none}
			#scrollarea ul {margin: 0px;padding: 0px;}
			#scrollarea {
				width: 200px; height: 100px; overflow: auto;
				border: solid 2px black;
			}
			h2 {clear: both;}
        </style>
	</head>
	<body>
<div  id='demo-html'>
<h2>Drag with bind</h2>
<div id="drag" class='handle'>Drag Me</div>

<h2>Delegated Drags</h2>
<div id="delegate">
	<div class='handle'>handle</div>
	<div class='handle'>handle</div>
</div>

<h2>Drag Ghost</h2>
<div id="ghost" class='handle'>Drag and I get cloned</div>

<h2>Drag Revert</h2>
<div class='handle revert'>Drag and let me go</div>
<div class='handle revert'>Drag and let me go</div>

<h2>Limit Drag</h2>
<div id='container'>
	<div class='handle'>drag me out of bounds</div>
</div>

<h2>Drag Representative</h2>
<div id='repdrag' class='handle'>Drag a Representative</div>
<div id='representative' style='display: none'>I represent You</div>

<h2>Drag Horizontal</h2>
<div id='horizontal' class='handle'>I only move horizontal</div>

<h2>Drag Distance</h2>
<div id='distance' class='handle'>You have to move me 50 pixels</div>


<h2>Drag Scrolls</h2>
<div id='scroll-drag' class='handle'>I move scrollbars</div>
<div id='scrollarea'>
	<ul><li>1</li><li>2</li><li>3</li>
	    <li>4</li><li>5</li><li>6</li>
		<li>7</li><li>8</li><li>9</li></ul>
</div>
</div>
<h2>Allow Text Selection</h2>
<div id='form-drag' class='handle big'>
	<p>I should be able to drag on this</p>
	<input type='text' value='I can be clicked on'/>
</div>
		<script type='text/javascript' src='../../../steal/steal.js'>
        </script>
	<script type='text/javascript' id='demo-source'>
steal("jquerypp/event/drag",
	"jquerypp/event/drag/scroll",
	"jquerypp/event/drag/limit").then(function(){
//drag with bind
$("#drag").on("draginit",function(){})

//delegated drags
$("#delegate").delegate(".handle","draginit",function(){})

//ghost
$("#ghost").on("draginit",function(ev, drag){drag.ghost()})

//revert
$(".revert").on("draginit",function(ev, drag){ drag.revert() })

//limit
$("#container").delegate(".handle","draginit",function(ev, drag){drag.limit( $("#container") )})

//representative
$("#repdrag").on("draginit",function(ev, drag){drag.representative($("#representative"),50,30)})

//horizontal
$("#horizontal").on("draginit",function(ev, drag){drag.horizontal()})

//distance
$('#distance').on('dragdown', function(ev, drag){
	ev.preventDefault();
	drag.distance(50)
})

//scrolls
$("#scroll-drag").on("draginit",function(ev, drag){drag.scrolls( $("#scrollarea") )})

// allow form elements to be selected
$("#form-drag").on("dragdown",function(ev, drag){
	if(ev.target.nodeName.toLowerCase() == 'input'){
		drag.cancel();
	}
})
})
</script>
	</body>
</html>