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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jquery.event.drop - Demos</title>
<style type="text/css" media="screen">
body {
font: 12px/16px Verdana, Arial, Helvetica, sans-serif;
color: #002;
padding: 0;
margin: 20px;
}
code {
display: block;
background: #F9F9F9;
border: 1px dashed #ABC;
font: 12px/16px "Courier New", Courier, monospace;
padding: 10px;
margin: 0 0 30px 0;
white-space: pre;
float: left;
}
.str { color: #00A; }
.kwd { color: #808; }
.com { color: #777; }
.typ { color: #088; }
.lit { color: #800; }
.pun { color: #000; }
.pln { color: #002; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
p { margin: 0 0 5px 0; }
.box {
padding: 10px 20px;
background: #CCC;
border: 1px solid #AAA;
text-align: center;
font-size: 10px;
margin: 0 0 10px 0;
}
.drag {
height: 100px;
width: 100px;
float: left;
border: 1px solid #AAA;
background: #CCC;
margin: 10px;
cursor: move;
font-size: 80px;
text-align: center;
line-height: 100px;
color: #AAA;
}
.drop .drag {
height: 77px;
width: 77px;
font-size: 70px;
line-height: 77px;
}
.drop {
height: 202px;
width: 202px;
float: left;
border: 1px solid #AAA;
background: #CCC;
margin: 10px;
padding: 10px;
overflow: auto;
}
.ghost {
position: absolute;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
background-color: #CCF;
border-color: #AAD;
color: #AAD;
}
.outline {
background-color: #FCC;
border-color: #DAA;
border-style: dashed;
color: #DAA;
}
.active {
background-color: #CFC;
border-color: #ADA;
}
#nodrop {
height: 120px;
}
#log {
border: 1px solid #AAA;
padding: 10px;
overflow: auto;
height: 160px;
width: 464px;
}
</style>
<script src="/usr/share/javascript/jquery/jquery.min.js" type="text/javascript"></script>
<script src="http://threedubmedia.googlecode.com/files/jquery.event.drag-1.3.js" type="text/javascript"></script>
<script src="../jquery.event.drop-1.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
$(".drag")
.bind( "dragstart", function( event ){
// ref the "dragged" element, make a copy
var $drag = $( this ), $proxy = $drag.clone();
// modify the "dragged" source element
$drag.addClass("outline");
// insert and return the "proxy" element
return $proxy.appendTo( document.body ).addClass("ghost");
})
.bind( "drag", function( event ){
// update the "proxy" element position
$( event.dragProxy ).css({
left: event.offsetX,
top: event.offsetY
});
})
.bind( "dragend", function( event ){
// remove the "proxy" element
$( event.dragProxy ).fadeOut( "normal", function(){
$( this ).remove();
});
// if there is no drop AND the target was previously dropped
if ( !event.dropTarget && $(this).parent().is(".drop") ){
// output details of the action
$('#log').append('<div>Removed <b>'+ this.title +'</b> from <b>'+ this.parentNode.title +'</b></div>');
// put it in it's original <div>
$('#nodrop').append( this );
}
// restore to a normal state
$( this ).removeClass("outline");
});
$('.drop')
.bind( "dropstart", function( event ){
// don't drop in itself
if ( this == event.dragTarget.parentNode ) return false;
// activate the "drop" target element
$( this ).addClass("active");
})
.bind( "drop", function( event ){
// if there was a drop, move some data...
$( this ).append( event.dragTarget );
// output details of the action...
$('#log').append('<div>Dropped <b>'+ event.dragTarget.title +'</b> into <b>'+ this.title +'</b></div>');
})
.bind( "dropend", function( event ){
// deactivate the "drop" target element
$( this ).removeClass("active");
});
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
});
</script>
</head>
<body>
<h2>Demos / jquery.event.drop.js / <a href="http://threedubmedia.com/">threedubmedia.com</a></h2>
<div class="drop" title="Target A">
<b>A</b>
</div>
<div class="drop" title="Target B">
<b>B</b>
</div>
<br clear="all" />
<div id="nodrop">
<div class="drag" title="Div 1">1</div>
<div class="drag" title="Div 2">2</div>
<div class="drag" title="Div 3">3</div>
<div class="drag" title="Div 4">4</div>
</div>
<br clear="all" />
-- output log --
<div id="log">
</div>
-- sample code --
<code><span class="pln">$</span><span class="pun">(</span><span class="str">".drag"</span><span class="pun">)</span><span class="pln"><br> </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="pln"> </span><span class="str">"dragstart"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> event </span><span class="pun">){</span><span class="pln"><br> </span><span class="com">// ref the "dragged" element, make a copy</span><span class="pln"><br> </span><span class="kwd">var</span><span class="pln"> $drag </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">),</span><span class="pln"> $proxy </span><span class="pun">=</span><span class="pln"> $drag</span><span class="pun">.</span><span class="pln">clone</span><span class="pun">();</span><span class="pln"><br> </span><span class="com">// modify the "dragged" source element</span><span class="pln"><br> $drag</span><span class="pun">.</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">"outline"</span><span class="pun">);</span><span class="pln"><br> </span><span class="com">// insert and return the "proxy" element </span><span class="pln"><br> </span><span class="kwd">return</span><span class="pln"> $proxy</span><span class="pun">.</span><span class="pln">appendTo</span><span class="pun">(</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">body </span><span class="pun">).</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">"ghost"</span><span class="pun">);</span><span class="pln"><br> </span><span class="pun">})</span><span class="pln"><br> </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="pln"> </span><span class="str">"drag"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> event </span><span class="pun">){</span><span class="pln"><br> </span><span class="com">// update the "proxy" element position</span><span class="pln"><br> $</span><span class="pun">(</span><span class="pln"> event</span><span class="pun">.</span><span class="pln">dragProxy </span><span class="pun">).</span><span class="pln">css</span><span class="pun">({</span><span class="pln"><br> left</span><span class="pun">:</span><span class="pln"> event</span><span class="pun">.</span><span class="pln">offsetX</span><span class="pun">,</span><span class="pln"> <br> top</span><span class="pun">:</span><span class="pln"> event</span><span class="pun">.</span><span class="pln">offsetY<br> </span><span class="pun">});</span><span class="pln"><br> </span><span class="pun">})</span><span class="pln"><br> </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="pln"> </span><span class="str">"dragend"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> event </span><span class="pun">){</span><span class="pln"><br> </span><span class="com">// remove the "proxy" element</span><span class="pln"><br> $</span><span class="pun">(</span><span class="pln"> event</span><span class="pun">.</span><span class="pln">dragProxy </span><span class="pun">).</span><span class="pln">fadeOut</span><span class="pun">(</span><span class="pln"> </span><span class="str">"normal"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(){</span><span class="pln"><br> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">remove</span><span class="pun">();</span><span class="pln"><br> </span><span class="pun">});</span><span class="pln"><br> </span><span class="com">// if there is no drop AND the target was previously dropped </span><span class="pln"><br> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="pun">!</span><span class="pln">event</span><span class="pun">.</span><span class="pln">dropTarget </span><span class="pun">&&</span><span class="pln"> $</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">parent</span><span class="pun">().</span><span class="pln">is</span><span class="pun">(</span><span class="str">".drop"</span><span class="pun">)</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br> </span><span class="com">// output details of the action</span><span class="pln"><br> $</span><span class="pun">(</span><span class="str">'#log'</span><span class="pun">).</span><span class="pln">append</span><span class="pun">(</span><span class="str">'<div>Removed <b>'</span><span class="pun">+</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">title </span><span class="pun">+</span><span class="str">'</b> from <b>'</span><span class="pun">+</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">parentNode</span><span class="pun">.</span><span class="pln">title </span><span class="pun">+</span><span class="str">'</b></div>'</span><span class="pun">);</span><span class="pln"><br> </span><span class="com">// put it in it's original div...</span><span class="pln"><br> $</span><span class="pun">(</span><span class="str">'#nodrop'</span><span class="pun">).</span><span class="pln">append</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">);</span><span class="pln"><br> </span><span class="pun">}</span><span class="pln"><br> </span><span class="com">// restore to a normal state</span><span class="pln"><br> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">removeClass</span><span class="pun">(</span><span class="str">"outline"</span><span class="pun">);</span><span class="pln"> <br> <br> </span><span class="pun">});</span><span class="pln"><br>$</span><span class="pun">(</span><span class="str">".drop"</span><span class="pun">)</span><span class="pln"><br> </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="pln"> </span><span class="str">"dropstart"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> event </span><span class="pun">){</span><span class="pln"><br> </span><span class="com">// don't drop in itself</span><span class="pln"><br> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">==</span><span class="pln"> event</span><span class="pun">.</span><span class="pln">dragTarget</span><span class="pun">.</span><span class="pln">parentNode </span><span class="pun">)</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln"><br> </span><span class="com">// activate the "drop" target element</span><span class="pln"><br> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">"active"</span><span class="pun">);</span><span class="pln"><br> </span><span class="pun">})</span><span class="pln"><br> </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="pln"> </span><span class="str">"drop"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> event </span><span class="pun">){</span><span class="pln"><br> </span><span class="com">// if there was a drop, move some data...</span><span class="pln"><br> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">append</span><span class="pun">(</span><span class="pln"> event</span><span class="pun">.</span><span class="pln">dragTarget </span><span class="pun">);</span><span class="pln"><br> </span><span class="com">// output details of the action...</span><span class="pln"><br> $</span><span class="pun">(</span><span class="str">'#log'</span><span class="pun">).</span><span class="pln">append</span><span class="pun">(</span><span class="str">'<div>Dropped <b>'</span><span class="pun">+</span><span class="pln"> event</span><span class="pun">.</span><span class="pln">dragTarget</span><span class="pun">.</span><span class="pln">title </span><span class="pun">+</span><span class="str">'</b> into <b>'</span><span class="pun">+</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">title </span><span class="pun">+</span><span class="str">'</b></div>'</span><span class="pun">);</span><span class="pln"> <br> </span><span class="pun">})</span><span class="pln"><br> </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="pln"> </span><span class="str">"dropend"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> event </span><span class="pun">){</span><span class="pln"><br> </span><span class="com">// deactivate the "drop" target element</span><span class="pln"><br> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">removeClass</span><span class="pun">(</span><span class="str">"active"</span><span class="pun">);</span><span class="pln"><br> </span><span class="pun">});</span></code>
</body>
</html>
|
