jquerypp-rails 1.0.1.1.rc3 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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)
|