jquerypp-rails 1.0.1.1.rc3 → 1.0.2
Sign up to get free protection for your applications and to get access to all the features.
- data/README.markdown +28 -31
- data/lib/jquerypp/rails/version.rb +1 -1
- metadata +2 -25
- data/vendor/assets/javascripts/lib/jquery.animate.js +0 -326
- data/vendor/assets/javascripts/lib/jquery.compare.js +0 -75
- data/vendor/assets/javascripts/lib/jquery.cookie.js +0 -118
- data/vendor/assets/javascripts/lib/jquery.dimensions.js +0 -191
- data/vendor/assets/javascripts/lib/jquery.event.default.js +0 -115
- data/vendor/assets/javascripts/lib/jquery.event.destroyed.js +0 -23
- data/vendor/assets/javascripts/lib/jquery.event.drag.js +0 -727
- data/vendor/assets/javascripts/lib/jquery.event.drop.js +0 -457
- data/vendor/assets/javascripts/lib/jquery.event.fastfix.js +0 -95
- data/vendor/assets/javascripts/lib/jquery.event.hover.js +0 -266
- data/vendor/assets/javascripts/lib/jquery.event.key.js +0 -156
- data/vendor/assets/javascripts/lib/jquery.event.livehack.js +0 -174
- data/vendor/assets/javascripts/lib/jquery.event.pause.js +0 -92
- data/vendor/assets/javascripts/lib/jquery.event.resize.js +0 -47
- data/vendor/assets/javascripts/lib/jquery.event.swipe.js +0 -133
- data/vendor/assets/javascripts/lib/jquery.fills.js +0 -249
- data/vendor/assets/javascripts/lib/jquery.form_params.js +0 -167
- data/vendor/assets/javascripts/lib/jquery.lang.json.js +0 -196
- data/vendor/assets/javascripts/lib/jquery.lang.vector.js +0 -214
- data/vendor/assets/javascripts/lib/jquery.range.js +0 -861
- data/vendor/assets/javascripts/lib/jquery.selection.js +0 -232
- data/vendor/assets/javascripts/lib/jquery.styles.js +0 -103
- data/vendor/assets/javascripts/lib/jquery.within.js +0 -94
@@ -1,23 +0,0 @@
|
|
1
|
-
// - jquery.event.destroyed.js
|
2
|
-
(function( $ ) {
|
3
|
-
/**
|
4
|
-
* @attribute destroyed
|
5
|
-
* @download http://jmvcsite.heroku.com/pluginify?plugins[]=jquery/dom/destroyed/destroyed.js
|
6
|
-
* @test jquery/event/destroyed/qunit.html
|
7
|
-
*/
|
8
|
-
|
9
|
-
// Store the old jQuery.cleanData
|
10
|
-
var oldClean = jQuery.cleanData;
|
11
|
-
|
12
|
-
// Overwrites cleanData which is called by jQuery on manipulation methods
|
13
|
-
$.cleanData = function( elems ) {
|
14
|
-
for ( var i = 0, elem;
|
15
|
-
(elem = elems[i]) !== undefined; i++ ) {
|
16
|
-
// Trigger the destroyed event
|
17
|
-
$(elem).triggerHandler("destroyed");
|
18
|
-
}
|
19
|
-
// Call the old jQuery.cleanData
|
20
|
-
oldClean(elems);
|
21
|
-
};
|
22
|
-
|
23
|
-
})(jQuery)
|
@@ -1,727 +0,0 @@
|
|
1
|
-
// Dependencies:
|
2
|
-
//
|
3
|
-
// - jquery.event.drag.js
|
4
|
-
// - jquery.event.livehack.js
|
5
|
-
// - jquery.lang.vector.js
|
6
|
-
|
7
|
-
(function( $ ) {
|
8
|
-
//modify live
|
9
|
-
//steal the live handler ....
|
10
|
-
var bind = function( object, method ) {
|
11
|
-
var args = Array.prototype.slice.call(arguments, 2);
|
12
|
-
return function() {
|
13
|
-
var args2 = [this].concat(args, $.makeArray(arguments));
|
14
|
-
return method.apply(object, args2);
|
15
|
-
};
|
16
|
-
},
|
17
|
-
event = $.event,
|
18
|
-
// function to clear the window selection if there is one
|
19
|
-
clearSelection = window.getSelection ? function(){
|
20
|
-
window.getSelection().removeAllRanges()
|
21
|
-
} : function(){},
|
22
|
-
|
23
|
-
supportTouch = "ontouchend" in document,
|
24
|
-
// Use touch events or map it to mouse events
|
25
|
-
startEvent = supportTouch ? "touchstart" : "mousedown",
|
26
|
-
stopEvent = supportTouch ? "touchend" : "mouseup",
|
27
|
-
moveEvent = supportTouch ? "touchmove" : "mousemove",
|
28
|
-
// On touchmove events the default (scrolling) event has to be prevented
|
29
|
-
preventTouchScroll = function(ev) {
|
30
|
-
ev.preventDefault();
|
31
|
-
};
|
32
|
-
|
33
|
-
/**
|
34
|
-
* @class jQuery.Drag
|
35
|
-
* @parent jQuery.event.drag
|
36
|
-
* @plugin jquery/event/drag
|
37
|
-
* @download http://jmvcsite.heroku.com/pluginify?plugins[]=jquery/event/drag/drag.js
|
38
|
-
* @test jquery/event/drag/qunit.html
|
39
|
-
*
|
40
|
-
* The `$.Drag` constructor is never called directly but an instance of `$.Drag` is passed as the second argument
|
41
|
-
* to the `dragdown`, `draginit`, `dragmove`, `dragend`, `dragover` and `dragout` event handlers:
|
42
|
-
*
|
43
|
-
* $('#dragger').on('draginit', function(el, drag) {
|
44
|
-
* // drag -> $.Drag
|
45
|
-
* });
|
46
|
-
*/
|
47
|
-
$.Drag = function() {};
|
48
|
-
|
49
|
-
/**
|
50
|
-
* @Static
|
51
|
-
*/
|
52
|
-
$.extend($.Drag, {
|
53
|
-
lowerName: "drag",
|
54
|
-
current: null,
|
55
|
-
distance: 0,
|
56
|
-
/**
|
57
|
-
* Called when someone mouses down on a draggable object.
|
58
|
-
* Gathers all callback functions and creates a new Draggable.
|
59
|
-
* @hide
|
60
|
-
*/
|
61
|
-
mousedown: function( ev, element ) {
|
62
|
-
var isLeftButton = ev.button === 0 || ev.button == 1,
|
63
|
-
doEvent = isLeftButton || supportTouch;
|
64
|
-
|
65
|
-
if (!doEvent || this.current ) {
|
66
|
-
return;
|
67
|
-
}
|
68
|
-
|
69
|
-
//create Drag
|
70
|
-
var drag = new $.Drag(),
|
71
|
-
delegate = ev.delegateTarget || element,
|
72
|
-
selector = ev.handleObj.selector,
|
73
|
-
self = this;
|
74
|
-
this.current = drag;
|
75
|
-
|
76
|
-
drag.setup({
|
77
|
-
element: element,
|
78
|
-
delegate: ev.delegateTarget || element,
|
79
|
-
selector: ev.handleObj.selector,
|
80
|
-
moved: false,
|
81
|
-
_distance: this.distance,
|
82
|
-
callbacks: {
|
83
|
-
dragdown: event.find(delegate, ["dragdown"], selector),
|
84
|
-
draginit: event.find(delegate, ["draginit"], selector),
|
85
|
-
dragover: event.find(delegate, ["dragover"], selector),
|
86
|
-
dragmove: event.find(delegate, ["dragmove"], selector),
|
87
|
-
dragout: event.find(delegate, ["dragout"], selector),
|
88
|
-
dragend: event.find(delegate, ["dragend"], selector)
|
89
|
-
},
|
90
|
-
destroyed: function() {
|
91
|
-
self.current = null;
|
92
|
-
}
|
93
|
-
}, ev);
|
94
|
-
}
|
95
|
-
});
|
96
|
-
|
97
|
-
/**
|
98
|
-
* @Prototype
|
99
|
-
*/
|
100
|
-
$.extend($.Drag.prototype, {
|
101
|
-
setup: function( options, ev ) {
|
102
|
-
$.extend(this, options);
|
103
|
-
|
104
|
-
this.element = $(this.element);
|
105
|
-
this.event = ev;
|
106
|
-
this.moved = false;
|
107
|
-
this.allowOtherDrags = false;
|
108
|
-
var mousemove = bind(this, this.mousemove),
|
109
|
-
mouseup = bind(this, this.mouseup);
|
110
|
-
this._mousemove = mousemove;
|
111
|
-
this._mouseup = mouseup;
|
112
|
-
this._distance = options.distance ? options.distance : 0;
|
113
|
-
|
114
|
-
//where the mouse is located
|
115
|
-
this.mouseStartPosition = ev.vector();
|
116
|
-
|
117
|
-
$(document).bind(moveEvent, mousemove);
|
118
|
-
$(document).bind(stopEvent, mouseup);
|
119
|
-
if(supportTouch) {
|
120
|
-
// On touch devices we want to disable scrolling
|
121
|
-
$(document).bind(moveEvent, preventTouchScroll);
|
122
|
-
}
|
123
|
-
|
124
|
-
if (!this.callEvents('down', this.element, ev) ) {
|
125
|
-
this.noSelection(this.delegate);
|
126
|
-
//this is for firefox
|
127
|
-
clearSelection();
|
128
|
-
}
|
129
|
-
},
|
130
|
-
/**
|
131
|
-
* @attribute element
|
132
|
-
* A reference to the element that is being dragged. For example:
|
133
|
-
*
|
134
|
-
* $('.draggable').on('draginit', function(ev, drag) {
|
135
|
-
* drag.element.html('I am the drag element');
|
136
|
-
* });
|
137
|
-
*/
|
138
|
-
|
139
|
-
/**
|
140
|
-
* Unbinds listeners and allows other drags ...
|
141
|
-
* @hide
|
142
|
-
*/
|
143
|
-
destroy: function() {
|
144
|
-
// Unbind the mouse handlers attached for dragging
|
145
|
-
$(document).unbind(moveEvent, this._mousemove);
|
146
|
-
$(document).unbind(stopEvent, this._mouseup);
|
147
|
-
if(supportTouch) {
|
148
|
-
// Enable scrolling again for touch devices when the drag is done
|
149
|
-
$(document).unbind(moveEvent, preventTouchScroll);
|
150
|
-
}
|
151
|
-
|
152
|
-
if (!this.moved ) {
|
153
|
-
this.event = this.element = null;
|
154
|
-
}
|
155
|
-
|
156
|
-
if(!supportTouch) {
|
157
|
-
this.selection(this.delegate);
|
158
|
-
}
|
159
|
-
this.destroyed();
|
160
|
-
},
|
161
|
-
mousemove: function( docEl, ev ) {
|
162
|
-
if (!this.moved ) {
|
163
|
-
var dist = Math.sqrt( Math.pow( ev.pageX - this.event.pageX, 2 ) + Math.pow( ev.pageY - this.event.pageY, 2 ));
|
164
|
-
// Don't initialize the drag if it hasn't been moved the minimum distance
|
165
|
-
if(dist < this._distance){
|
166
|
-
return false;
|
167
|
-
}
|
168
|
-
// Otherwise call init and indicate that the drag has moved
|
169
|
-
this.init(this.element, ev);
|
170
|
-
this.moved = true;
|
171
|
-
}
|
172
|
-
|
173
|
-
var pointer = ev.vector();
|
174
|
-
if ( this._start_position && this._start_position.equals(pointer) ) {
|
175
|
-
return;
|
176
|
-
}
|
177
|
-
this.draw(pointer, ev);
|
178
|
-
},
|
179
|
-
|
180
|
-
mouseup: function( docEl, event ) {
|
181
|
-
//if there is a current, we should call its dragstop
|
182
|
-
if ( this.moved ) {
|
183
|
-
this.end(event);
|
184
|
-
}
|
185
|
-
this.destroy();
|
186
|
-
},
|
187
|
-
|
188
|
-
/**
|
189
|
-
* The `drag.noSelection(element)` method turns off text selection during a drag event.
|
190
|
-
* This method is called by default unless a event is listening to the 'dragdown' event.
|
191
|
-
*
|
192
|
-
* ## Example
|
193
|
-
*
|
194
|
-
* $('div.drag').bind('dragdown', function(elm,event,drag){
|
195
|
-
* drag.noSelection();
|
196
|
-
* });
|
197
|
-
*
|
198
|
-
* @param [elm] an element to prevent selection on. Defaults to the dragable element.
|
199
|
-
*/
|
200
|
-
noSelection: function(elm) {
|
201
|
-
elm = elm || this.delegate
|
202
|
-
document.documentElement.onselectstart = function() {
|
203
|
-
// Disables selection
|
204
|
-
return false;
|
205
|
-
};
|
206
|
-
document.documentElement.unselectable = "on";
|
207
|
-
this.selectionDisabled = (this.selectionDisabled ? this.selectionDisabled.add(elm) : $(elm));
|
208
|
-
this.selectionDisabled.css('-moz-user-select', '-moz-none');
|
209
|
-
},
|
210
|
-
|
211
|
-
/**
|
212
|
-
* @hide
|
213
|
-
* `drag.selection()` method turns on text selection that was previously turned off during the drag event.
|
214
|
-
* This method is always called.
|
215
|
-
*
|
216
|
-
* ## Example
|
217
|
-
*
|
218
|
-
* $('div.drag').bind('dragdown', function(elm,event,drag){
|
219
|
-
* drag.selection();
|
220
|
-
* });
|
221
|
-
*/
|
222
|
-
selection: function() {
|
223
|
-
if(this.selectionDisabled) {
|
224
|
-
document.documentElement.onselectstart = function() {};
|
225
|
-
document.documentElement.unselectable = "off";
|
226
|
-
this.selectionDisabled.css('-moz-user-select', '');
|
227
|
-
}
|
228
|
-
},
|
229
|
-
|
230
|
-
init: function( element, event ) {
|
231
|
-
element = $(element);
|
232
|
-
//the element that has been clicked on
|
233
|
-
var startElement = (this.movingElement = (this.element = $(element)));
|
234
|
-
//if a mousemove has come after the click
|
235
|
-
//if the drag has been cancelled
|
236
|
-
this._cancelled = false;
|
237
|
-
this.event = event;
|
238
|
-
|
239
|
-
/**
|
240
|
-
* @attribute mouseElementPosition
|
241
|
-
* The position of start of the cursor on the element
|
242
|
-
*/
|
243
|
-
this.mouseElementPosition = this.mouseStartPosition.minus(this.element.offsetv()); //where the mouse is on the Element
|
244
|
-
this.callEvents('init', element, event);
|
245
|
-
|
246
|
-
// Check what they have set and respond accordingly if they canceled
|
247
|
-
if ( this._cancelled === true ) {
|
248
|
-
return;
|
249
|
-
}
|
250
|
-
// if they set something else as the element
|
251
|
-
this.startPosition = startElement != this.movingElement ? this.movingElement.offsetv() : this.currentDelta();
|
252
|
-
|
253
|
-
this.makePositioned(this.movingElement);
|
254
|
-
// Adjust the drag elements z-index to a high value
|
255
|
-
this.oldZIndex = this.movingElement.css('zIndex');
|
256
|
-
this.movingElement.css('zIndex', 1000);
|
257
|
-
if (!this._only && this.constructor.responder ) {
|
258
|
-
// calls $.Drop.prototype.compile if there is a drop element
|
259
|
-
this.constructor.responder.compile(event, this);
|
260
|
-
}
|
261
|
-
},
|
262
|
-
makePositioned: function( that ) {
|
263
|
-
var style, pos = that.css('position');
|
264
|
-
|
265
|
-
// Position properly, set top and left to 0px for Opera
|
266
|
-
if (!pos || pos == 'static' ) {
|
267
|
-
style = {
|
268
|
-
position: 'relative'
|
269
|
-
};
|
270
|
-
|
271
|
-
if ( window.opera ) {
|
272
|
-
style.top = '0px';
|
273
|
-
style.left = '0px';
|
274
|
-
}
|
275
|
-
that.css(style);
|
276
|
-
}
|
277
|
-
},
|
278
|
-
callEvents: function( type, element, event, drop ) {
|
279
|
-
var i, cbs = this.callbacks[this.constructor.lowerName + type];
|
280
|
-
for ( i = 0; i < cbs.length; i++ ) {
|
281
|
-
cbs[i].call(element, event, this, drop);
|
282
|
-
}
|
283
|
-
return cbs.length;
|
284
|
-
},
|
285
|
-
/**
|
286
|
-
* Returns the position of the movingElement by taking its top and left.
|
287
|
-
* @hide
|
288
|
-
* @return {$.Vector}
|
289
|
-
*/
|
290
|
-
currentDelta: function() {
|
291
|
-
return new $.Vector(parseInt(this.movingElement.css('left'), 10) || 0, parseInt(this.movingElement.css('top'), 10) || 0);
|
292
|
-
},
|
293
|
-
//draws the position of the dragmove object
|
294
|
-
draw: function( pointer, event ) {
|
295
|
-
// only drag if we haven't been cancelled;
|
296
|
-
if ( this._cancelled ) {
|
297
|
-
return;
|
298
|
-
}
|
299
|
-
clearSelection();
|
300
|
-
/**
|
301
|
-
* @attribute location
|
302
|
-
* `drag.location` is a [jQuery.Vector] specifying where the element should be in the page. This
|
303
|
-
* takes into account the start position of the cursor on the element.
|
304
|
-
*
|
305
|
-
* If the drag is going to be moved to an unacceptable location, you can call preventDefault in
|
306
|
-
* dragmove to prevent it from being moved there.
|
307
|
-
*
|
308
|
-
* $('.mover').bind("dragmove", function(ev, drag){
|
309
|
-
* if(drag.location.top() < 100){
|
310
|
-
* ev.preventDefault()
|
311
|
-
* }
|
312
|
-
* });
|
313
|
-
*
|
314
|
-
* You can also set the location to where it should be on the page.
|
315
|
-
*
|
316
|
-
*/
|
317
|
-
// the offset between the mouse pointer and the representative that the user asked for
|
318
|
-
this.location = pointer.minus(this.mouseElementPosition);
|
319
|
-
|
320
|
-
// call move events
|
321
|
-
this.move(event);
|
322
|
-
if ( this._cancelled ) {
|
323
|
-
return;
|
324
|
-
}
|
325
|
-
if (!event.isDefaultPrevented() ) {
|
326
|
-
this.position(this.location);
|
327
|
-
}
|
328
|
-
|
329
|
-
// fill in
|
330
|
-
if (!this._only && this.constructor.responder ) {
|
331
|
-
this.constructor.responder.show(pointer, this, event);
|
332
|
-
}
|
333
|
-
},
|
334
|
-
/**
|
335
|
-
* `drag.position( newOffsetVector )` sets the position of the movingElement. This is overwritten by
|
336
|
-
* the [$.Drag::scrolls], [$.Drag::limit] and [$.Drag::step] plugins
|
337
|
-
* to make sure the moving element scrolls some element
|
338
|
-
* or stays within some boundary. This function is exposed and documented so you could do the same.
|
339
|
-
*
|
340
|
-
* The following approximates how step does it:
|
341
|
-
*
|
342
|
-
* var oldPosition = $.Drag.prototype.position;
|
343
|
-
* $.Drag.prototype.position = function( offsetPositionv ) {
|
344
|
-
* if(this._step){
|
345
|
-
* // change offsetPositionv to be on the step value
|
346
|
-
* }
|
347
|
-
*
|
348
|
-
* oldPosition.call(this, offsetPosition)
|
349
|
-
* }
|
350
|
-
*
|
351
|
-
* @param {jQuery.Vector} newOffsetv the new [$.Drag::location] of the element.
|
352
|
-
*/
|
353
|
-
position: function( newOffsetv ) { //should draw it on the page
|
354
|
-
var style, dragged_element_css_offset = this.currentDelta(),
|
355
|
-
// the drag element's current left + top css attributes
|
356
|
-
// the vector between the movingElement's page and css positions
|
357
|
-
// this can be thought of as the original offset
|
358
|
-
dragged_element_position_vector = this.movingElement.offsetv().minus(dragged_element_css_offset);
|
359
|
-
this.required_css_position = newOffsetv.minus(dragged_element_position_vector);
|
360
|
-
|
361
|
-
this.offsetv = newOffsetv;
|
362
|
-
style = this.movingElement[0].style;
|
363
|
-
if (!this._cancelled && !this._horizontal ) {
|
364
|
-
style.top = this.required_css_position.top() + "px";
|
365
|
-
}
|
366
|
-
if (!this._cancelled && !this._vertical ) {
|
367
|
-
style.left = this.required_css_position.left() + "px";
|
368
|
-
}
|
369
|
-
},
|
370
|
-
move: function( event ) {
|
371
|
-
this.callEvents('move', this.element, event);
|
372
|
-
},
|
373
|
-
over: function( event, drop ) {
|
374
|
-
this.callEvents('over', this.element, event, drop);
|
375
|
-
},
|
376
|
-
out: function( event, drop ) {
|
377
|
-
this.callEvents('out', this.element, event, drop);
|
378
|
-
},
|
379
|
-
/**
|
380
|
-
* Called on drag up
|
381
|
-
* @hide
|
382
|
-
* @param {Event} event a mouseup event signalling drag/drop has completed
|
383
|
-
*/
|
384
|
-
end: function( event ) {
|
385
|
-
// If canceled do nothing
|
386
|
-
if ( this._cancelled ) {
|
387
|
-
return;
|
388
|
-
}
|
389
|
-
// notify the responder - usually a $.Drop instance
|
390
|
-
if (!this._only && this.constructor.responder ) {
|
391
|
-
this.constructor.responder.end(event, this);
|
392
|
-
}
|
393
|
-
|
394
|
-
this.callEvents('end', this.element, event);
|
395
|
-
|
396
|
-
if ( this._revert ) {
|
397
|
-
var self = this;
|
398
|
-
// animate moving back to original position
|
399
|
-
this.movingElement.animate({
|
400
|
-
top: this.startPosition.top() + "px",
|
401
|
-
left: this.startPosition.left() + "px"
|
402
|
-
}, function() {
|
403
|
-
self.cleanup.apply(self, arguments);
|
404
|
-
});
|
405
|
-
}
|
406
|
-
else {
|
407
|
-
this.cleanup();
|
408
|
-
}
|
409
|
-
this.event = null;
|
410
|
-
},
|
411
|
-
/**
|
412
|
-
* Cleans up drag element after drag drop.
|
413
|
-
* @hide
|
414
|
-
*/
|
415
|
-
cleanup: function() {
|
416
|
-
this.movingElement.css({
|
417
|
-
zIndex: this.oldZIndex
|
418
|
-
});
|
419
|
-
if ( this.movingElement[0] !== this.element[0] &&
|
420
|
-
!this.movingElement.has(this.element[0]).length &&
|
421
|
-
!this.element.has(this.movingElement[0]).length ) {
|
422
|
-
this.movingElement.css({
|
423
|
-
display: 'none'
|
424
|
-
});
|
425
|
-
}
|
426
|
-
if ( this._removeMovingElement ) {
|
427
|
-
// Remove the element when using drag.ghost()
|
428
|
-
this.movingElement.remove();
|
429
|
-
}
|
430
|
-
|
431
|
-
this.movingElement = this.element = this.event = null;
|
432
|
-
},
|
433
|
-
/**
|
434
|
-
* `drag.cancel()` stops a drag motion from from running. This also stops any other events from firing, meaning
|
435
|
-
* that "dragend" will not be called.
|
436
|
-
*
|
437
|
-
* $("#todos").on(".handle", "draginit", function( ev, drag ) {
|
438
|
-
* if(drag.movingElement.hasClass("evil")){
|
439
|
-
* drag.cancel();
|
440
|
-
* }
|
441
|
-
* })
|
442
|
-
*
|
443
|
-
*/
|
444
|
-
cancel: function() {
|
445
|
-
this._cancelled = true;
|
446
|
-
if (!this._only && this.constructor.responder ) {
|
447
|
-
// clear the drops
|
448
|
-
this.constructor.responder.clear(this.event.vector(), this, this.event);
|
449
|
-
}
|
450
|
-
this.destroy();
|
451
|
-
|
452
|
-
},
|
453
|
-
/**
|
454
|
-
* `drag.ghost( [parent] )` clones the element and uses it as the
|
455
|
-
* moving element, leaving the original dragged element in place. The `parent` option can
|
456
|
-
* be used to specify where the ghost element should be temporarily added into the
|
457
|
-
* DOM. This method should be called in "draginit".
|
458
|
-
*
|
459
|
-
* $("#todos").on(".handle", "draginit", function( ev, drag ) {
|
460
|
-
* drag.ghost();
|
461
|
-
* })
|
462
|
-
*
|
463
|
-
* @param {HTMLElement} [parent] the parent element of the newly created ghost element. If not provided the
|
464
|
-
* ghost element is added after the moving element.
|
465
|
-
* @return {jQuery.fn} the ghost element to do whatever you want with it.
|
466
|
-
*/
|
467
|
-
ghost: function( parent ) {
|
468
|
-
// create a ghost by cloning the source element and attach the clone to the dom after the source element
|
469
|
-
var ghost = this.movingElement.clone().css('position', 'absolute');
|
470
|
-
if( parent ) {
|
471
|
-
$(parent).append(ghost);
|
472
|
-
} else {
|
473
|
-
$(this.movingElement).after(ghost)
|
474
|
-
}
|
475
|
-
ghost.width(this.movingElement.width()).height(this.movingElement.height());
|
476
|
-
// put the ghost in the right location ...
|
477
|
-
ghost.offset(this.movingElement.offset())
|
478
|
-
|
479
|
-
// store the original element and make the ghost the dragged element
|
480
|
-
this.movingElement = ghost;
|
481
|
-
this.noSelection(ghost)
|
482
|
-
this._removeMovingElement = true;
|
483
|
-
return ghost;
|
484
|
-
},
|
485
|
-
/**
|
486
|
-
* `drag.representative( element, [offsetX], [offsetY])` tells the drag motion to use
|
487
|
-
* a different element than the one that began the drag motion.
|
488
|
-
*
|
489
|
-
* For example, instead of
|
490
|
-
* dragging an drag-icon of a todo element, you want to move some other representation of
|
491
|
-
* the todo element (or elements). To do this you might:
|
492
|
-
*
|
493
|
-
* $("#todos").on(".handle", "draginit", function( ev, drag ) {
|
494
|
-
* // create what we'll drag
|
495
|
-
* var rep = $('<div/>').text("todos")
|
496
|
-
* .appendTo(document.body)
|
497
|
-
* // indicate we want our mouse on the top-right of it
|
498
|
-
* drag.representative(rep, rep.width(), 0);
|
499
|
-
* })
|
500
|
-
*
|
501
|
-
* @param {HTMLElement} element the element you want to actually drag. This should be
|
502
|
-
* already in the DOM.
|
503
|
-
* @param {Number} offsetX the x position where you want your mouse on the representative element (defaults to 0)
|
504
|
-
* @param {Number} offsetY the y position where you want your mouse on the representative element (defaults to 0)
|
505
|
-
* @return {drag} returns the drag object for chaining.
|
506
|
-
*/
|
507
|
-
representative: function( element, offsetX, offsetY ) {
|
508
|
-
this._offsetX = offsetX || 0;
|
509
|
-
this._offsetY = offsetY || 0;
|
510
|
-
|
511
|
-
var p = this.mouseStartPosition;
|
512
|
-
// Just set the representative as the drag element
|
513
|
-
this.movingElement = $(element);
|
514
|
-
this.movingElement.css({
|
515
|
-
top: (p.y() - this._offsetY) + "px",
|
516
|
-
left: (p.x() - this._offsetX) + "px",
|
517
|
-
display: 'block',
|
518
|
-
position: 'absolute'
|
519
|
-
}).show();
|
520
|
-
this.noSelection(this.movingElement)
|
521
|
-
this.mouseElementPosition = new $.Vector(this._offsetX, this._offsetY);
|
522
|
-
return this;
|
523
|
-
},
|
524
|
-
/**
|
525
|
-
* `drag.revert([val])` makes the [$.Drag::representative representative] element revert back to it
|
526
|
-
* original position after the drag motion has completed. The revert is done with an animation.
|
527
|
-
*
|
528
|
-
* $("#todos").on(".handle","dragend",function( ev, drag ) {
|
529
|
-
* drag.revert();
|
530
|
-
* })
|
531
|
-
*
|
532
|
-
* @param {Boolean} [val] optional, set to false if you don't want to revert.
|
533
|
-
* @return {drag} the drag object for chaining
|
534
|
-
*/
|
535
|
-
revert: function( val ) {
|
536
|
-
this._revert = val === undefined ? true : val;
|
537
|
-
return this;
|
538
|
-
},
|
539
|
-
/**
|
540
|
-
* `drag.vertical()` isolates the drag to vertical movement. For example:
|
541
|
-
*
|
542
|
-
* $("#images").on(".thumbnail","draginit", function(ev, drag){
|
543
|
-
* drag.vertical();
|
544
|
-
* });
|
545
|
-
*
|
546
|
-
* Call `vertical()` in "draginit" or "dragdown".
|
547
|
-
*
|
548
|
-
* @return {drag} the drag object for chaining.
|
549
|
-
*/
|
550
|
-
vertical: function() {
|
551
|
-
this._vertical = true;
|
552
|
-
return this;
|
553
|
-
},
|
554
|
-
/**
|
555
|
-
* `drag.horizontal()` isolates the drag to horizontal movement. For example:
|
556
|
-
*
|
557
|
-
* $("#images").on(".thumbnail","draginit", function(ev, drag){
|
558
|
-
* drag.horizontal();
|
559
|
-
* });
|
560
|
-
*
|
561
|
-
* Call `horizontal()` in "draginit" or "dragdown".
|
562
|
-
*
|
563
|
-
* @return {drag} the drag object for chaining.
|
564
|
-
*/
|
565
|
-
horizontal: function() {
|
566
|
-
this._horizontal = true;
|
567
|
-
return this;
|
568
|
-
},
|
569
|
-
/**
|
570
|
-
* `drag.only([only])` indicates if you __only__ want a drag motion and the drag should
|
571
|
-
* not notify drops. The default value is `false`. Call it with no arguments or pass it true
|
572
|
-
* to prevent drop events.
|
573
|
-
*
|
574
|
-
* $("#images").on(".thumbnail","dragdown", function(ev, drag){
|
575
|
-
* drag.only();
|
576
|
-
* });
|
577
|
-
*
|
578
|
-
* @param {Boolean} [only] true if you want to prevent drops, false if otherwise.
|
579
|
-
* @return {Boolean} the current value of only.
|
580
|
-
*/
|
581
|
-
only: function( only ) {
|
582
|
-
return (this._only = (only === undefined ? true : only));
|
583
|
-
},
|
584
|
-
|
585
|
-
/**
|
586
|
-
* `distance([val])` sets or reads the distance the mouse must move before a drag motion is started. This should be set in
|
587
|
-
* "dragdown" and delays "draginit" being called until the distance is covered. The distance
|
588
|
-
* is measured in pixels. The default distance is 0 pixels meaning the drag motion starts on the first
|
589
|
-
* mousemove after a mousedown.
|
590
|
-
*
|
591
|
-
* Set this to make drag motion a little "stickier" to start.
|
592
|
-
*
|
593
|
-
* $("#images").on(".thumbnail","dragdown", function(ev, drag){
|
594
|
-
* drag.distance(10);
|
595
|
-
* });
|
596
|
-
*
|
597
|
-
* @param {Number} [val] The number of pixels the mouse must move before "draginit" is called.
|
598
|
-
* @return {drag|Number} returns the drag instance for chaining if the drag value is being set or the
|
599
|
-
* distance value if the distance is being read.
|
600
|
-
*/
|
601
|
-
distance: function(val){
|
602
|
-
if(val !== undefined){
|
603
|
-
this._distance = val;
|
604
|
-
return this;
|
605
|
-
}else{
|
606
|
-
return this._distance
|
607
|
-
}
|
608
|
-
}
|
609
|
-
});
|
610
|
-
/**
|
611
|
-
* @add jQuery.event.special
|
612
|
-
*/
|
613
|
-
event.setupHelper([
|
614
|
-
/**
|
615
|
-
* @attribute dragdown
|
616
|
-
* @parent jQuery.event.drag
|
617
|
-
*
|
618
|
-
* `dragdown` is called when a drag movement has started on a mousedown.
|
619
|
-
* The event handler gets an instance of [jQuery.Drag] passed as the second
|
620
|
-
* parameter. Listening to `dragdown` allows you to customize
|
621
|
-
* the behavior of a drag motion, especially when `draginit` should be called.
|
622
|
-
*
|
623
|
-
* $(".handles").delegate("dragdown", function(ev, drag){
|
624
|
-
* // call draginit only when the mouse has moved 20 px
|
625
|
-
* drag.distance(20);
|
626
|
-
* })
|
627
|
-
*
|
628
|
-
* Typically, when a drag motion is started, `event.preventDefault` is automatically
|
629
|
-
* called, preventing text selection. However, if you listen to
|
630
|
-
* `dragdown`, this default behavior is not called. You are responsible for calling it
|
631
|
-
* if you want it (you probably do).
|
632
|
-
*
|
633
|
-
* ### Why might you not want to call `preventDefault`?
|
634
|
-
*
|
635
|
-
* You might want it if you want to allow text selection on element
|
636
|
-
* within the drag element. Typically these are input elements.
|
637
|
-
*
|
638
|
-
* $(".handles").delegate("dragdown", function(ev, drag){
|
639
|
-
* if(ev.target.nodeName === "input"){
|
640
|
-
* drag.cancel();
|
641
|
-
* } else {
|
642
|
-
* ev.preventDefault();
|
643
|
-
* }
|
644
|
-
* })
|
645
|
-
*/
|
646
|
-
'dragdown',
|
647
|
-
/**
|
648
|
-
* @attribute draginit
|
649
|
-
* @parent jQuery.event.drag
|
650
|
-
*
|
651
|
-
* `draginit` is triggered when the drag motion starts. Use it to customize the drag behavior
|
652
|
-
* using the [jQuery.Drag] instance passed as the second parameter:
|
653
|
-
*
|
654
|
-
* $(".draggable").on('draginit', function(ev, drag) {
|
655
|
-
* // Only allow vertical drags
|
656
|
-
* drag.vertical();
|
657
|
-
* // Create a draggable copy of the element
|
658
|
-
* drag.ghost();
|
659
|
-
* });
|
660
|
-
*/
|
661
|
-
'draginit',
|
662
|
-
/**
|
663
|
-
* @attribute dragover
|
664
|
-
* @parent jQuery.event.drag
|
665
|
-
*
|
666
|
-
* `dragover` is triggered when a drag is over a [jQuery.event.drop drop element].
|
667
|
-
* The event handler gets an instance of [jQuery.Drag] passed as the second
|
668
|
-
* parameter and an instance of [jQuery.Drop] passed as the third argument:
|
669
|
-
*
|
670
|
-
* $('.draggable').on('dragover', function(ev, drag, drop) {
|
671
|
-
* // Add the drop-here class indicating that the drag
|
672
|
-
* // can be dropped here
|
673
|
-
* drag.element.addClass('drop-here');
|
674
|
-
* });
|
675
|
-
*/
|
676
|
-
'dragover',
|
677
|
-
/**
|
678
|
-
* @attribute dragmove
|
679
|
-
* @parent jQuery.event.drag
|
680
|
-
*
|
681
|
-
* `dragmove` is triggered when the drag element moves (similar to a mousemove).
|
682
|
-
* The event handler gets an instance of [jQuery.Drag] passed as the second
|
683
|
-
* parameter.
|
684
|
-
* Use [jQuery.Drag::location] to determine the current position
|
685
|
-
* as a [jQuery.Vector vector].
|
686
|
-
*
|
687
|
-
* For example, `dragmove` can be used to create a draggable element to resize
|
688
|
-
* a container:
|
689
|
-
*
|
690
|
-
* $('.resizer').on('dragmove', function(ev, drag) {
|
691
|
-
* $('#container').width(drag.location.x())
|
692
|
-
* .height(drag.location.y());
|
693
|
-
* });
|
694
|
-
*/
|
695
|
-
'dragmove',
|
696
|
-
/**
|
697
|
-
* @attribute dragout
|
698
|
-
* @parent jQuery.event.drag
|
699
|
-
*
|
700
|
-
* `dragout` is called when the drag leaves a drop point.
|
701
|
-
* The event handler gets an instance of [jQuery.Drag] passed as the second
|
702
|
-
* parameter.
|
703
|
-
*
|
704
|
-
* $('.draggable').on('dragout', function(ev, drag) {
|
705
|
-
* // Remove the drop-here class
|
706
|
-
* // (e.g. crossing the drag element out indicating that it
|
707
|
-
* // can't be dropped here
|
708
|
-
* drag.element.removeClass('drop-here');
|
709
|
-
* });
|
710
|
-
*/
|
711
|
-
'dragout',
|
712
|
-
/**
|
713
|
-
* @attribute dragend
|
714
|
-
* @parent jQuery.event.drag
|
715
|
-
*
|
716
|
-
* `dragend` is called when the drag motion is done.
|
717
|
-
* The event handler gets an instance of [jQuery.Drag] passed as the second
|
718
|
-
* parameter.
|
719
|
-
*
|
720
|
-
* $('.draggable').on('dragend', function(ev, drag)
|
721
|
-
* // Clean up when the drag motion is done
|
722
|
-
* });
|
723
|
-
*/
|
724
|
-
'dragend'], startEvent, function( e ) {
|
725
|
-
$.Drag.mousedown.call($.Drag, e, this);
|
726
|
-
});
|
727
|
-
})(jQuery)
|