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
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
|
/*
* 'this' -> original element
* 1. argument: browser event
* 2.argument: ui object
*/
(function($) {
$.ui.plugin.add("draggable", "cursor", {
start: function(e,ui) {
var t = $('body');
if (t.css("cursor")) ui.options._cursor = t.css("cursor");
t.css("cursor", ui.options.cursor);
},
stop: function(e,ui) {
if (ui.options._cursor) $('body').css("cursor", ui.options._cursor);
}
});
$.ui.plugin.add("draggable", "zIndex", {
start: function(e,ui) {
var t = $(ui.helper);
if(t.css("zIndex")) ui.options._zIndex = t.css("zIndex");
t.css('zIndex', ui.options.zIndex);
},
stop: function(e,ui) {
if(ui.options._zIndex) $(ui.helper).css('zIndex', ui.options._zIndex);
}
});
$.ui.plugin.add("draggable", "opacity", {
start: function(e,ui) {
var t = $(ui.helper);
if(t.css("opacity")) ui.options._opacity = t.css("opacity");
t.css('opacity', ui.options.opacity);
},
stop: function(e,ui) {
if(ui.options._opacity) $(ui.helper).css('opacity', ui.options._opacity);
}
});
$.ui.plugin.add("draggable", "revert", {
stop: function(e,ui) {
var self = ui.instance;
self.cancelHelperRemoval = true;
$(ui.helper).animate({ left: self.originalPosition.left, top: self.originalPosition.top }, parseInt(ui.options.revert, 10) || 500, function() {
if(ui.options.helper != 'original') self.helper.remove();
self.clear();
});
}
});
$.ui.plugin.add("draggable", "iframeFix", {
start: function(e,ui) {
var o = ui.options;
if(ui.instance.slowMode) return; // Make clones on top of iframes (only if we are not in slowMode)
if(o.iframeFix.constructor == Array) {
for(var i=0;i<o.iframeFix.length;i++) {
var co = $(o.iframeFix[i]).offset({ border: false });
$('<div class="DragDropIframeFix"" style="background: #fff;"></div>').css("width", $(o.iframeFix[i])[0].offsetWidth+"px").css("height", $(o.iframeFix[i])[0].offsetHeight+"px").css("position", "absolute").css("opacity", "0.001").css("z-index", "1000").css("top", co.top+"px").css("left", co.left+"px").appendTo("body");
}
} else {
$("iframe").each(function() {
var co = $(this).offset({ border: false });
$('<div class="DragDropIframeFix" style="background: #fff;"></div>').css("width", this.offsetWidth+"px").css("height", this.offsetHeight+"px").css("position", "absolute").css("opacity", "0.001").css("z-index", "1000").css("top", co.top+"px").css("left", co.left+"px").appendTo("body");
});
}
},
stop: function(e,ui) {
if(ui.options.iframeFix) $("div.DragDropIframeFix").each(function() { this.parentNode.removeChild(this); }); //Remove frame helpers
}
});
$.ui.plugin.add("draggable", "containment", {
start: function(e,ui) {
var o = ui.options;
if((o.containment.left != undefined || o.containment.constructor == Array) && !o._containment) return;
if(!o._containment) o._containment = o.containment;
if(o._containment == 'parent') o._containment = this[0].parentNode;
if(o._containment == 'document') {
o.containment = [
0,
0,
$(document).width(),
($(document).height() || document.body.parentNode.scrollHeight)
];
} else { //I'm a node, so compute top/left/right/bottom
var ce = $(o._containment)[0];
var co = $(o._containment).offset();
o.containment = [
co.left,
co.top,
co.left+(ce.offsetWidth || ce.scrollWidth),
co.top+(ce.offsetHeight || ce.scrollHeight)
];
}
},
drag: function(e,ui) {
var o = ui.options;
var h = ui.helper;
var c = o.containment;
var self = ui.instance;
if(c.constructor == Array) {
if((ui.absolutePosition.left < c[0])) self.position.left = c[0] - (self.offset.left - self.clickOffset.left);
if((ui.absolutePosition.top < c[1])) self.position.top = c[1] - (self.offset.top - self.clickOffset.top);
if(ui.absolutePosition.left - c[2] + self.helperProportions.width >= 0) self.position.left = c[2] - (self.offset.left - self.clickOffset.left) - self.helperProportions.width;
if(ui.absolutePosition.top - c[3] + self.helperProportions.height >= 0) self.position.top = c[3] - (self.offset.top - self.clickOffset.top) - self.helperProportions.height;
} else {
if((ui.position.left < c.left)) self.position.left = c.left;
if((ui.position.top < c.top)) self.position.top = c.top;
if(ui.position.left - self.offsetParent.innerWidth() + self.helperProportions.width + c.right + (parseInt(self.offsetParent.css("borderLeftWidth"), 10) || 0) + (parseInt(self.offsetParent.css("borderRightWidth"), 10) || 0) >= 0) self.position.left = self.offsetParent.innerWidth() - self.helperProportions.width - c.right - (parseInt(self.offsetParent.css("borderLeftWidth"), 10) || 0) - (parseInt(self.offsetParent.css("borderRightWidth"), 10) || 0);
if(ui.position.top - self.offsetParent.innerHeight() + self.helperProportions.height + c.bottom + (parseInt(self.offsetParent.css("borderTopWidth"), 10) || 0) + (parseInt(self.offsetParent.css("borderBottomWidth"), 10) || 0) >= 0) self.position.top = self.offsetParent.innerHeight() - self.helperProportions.height - c.bottom - (parseInt(self.offsetParent.css("borderTopWidth"), 10) || 0) - (parseInt(self.offsetParent.css("borderBottomWidth"), 10) || 0);
}
}
});
$.ui.plugin.add("draggable", "grid", {
drag: function(e,ui) {
var o = ui.options;
ui.instance.position.left = ui.instance.originalPosition.left + Math.round((e.pageX - ui.instance._pageX) / o.grid[0]) * o.grid[0];
ui.instance.position.top = ui.instance.originalPosition.top + Math.round((e.pageY - ui.instance._pageY) / o.grid[1]) * o.grid[1];
}
});
$.ui.plugin.add("draggable", "axis", {
drag: function(e,ui) {
var o = ui.options;
if(o.constraint) o.axis = o.constraint; //Legacy check
o.axis == 'x' ? ui.instance.position.top = ui.instance.originalPosition.top : ui.instance.position.left = ui.instance.originalPosition.left;
}
});
$.ui.plugin.add("draggable", "scroll", {
start: function(e,ui) {
var o = ui.options;
o.scrollSensitivity = o.scrollSensitivity || 20;
o.scrollSpeed = o.scrollSpeed || 20;
ui.instance.overflowY = function(el) {
do { if(/auto|scroll/.test(el.css('overflow')) || (/auto|scroll/).test(el.css('overflow-y'))) return el; el = el.parent(); } while (el[0].parentNode);
return $(document);
}(this);
ui.instance.overflowX = function(el) {
do { if(/auto|scroll/.test(el.css('overflow')) || (/auto|scroll/).test(el.css('overflow-x'))) return el; el = el.parent(); } while (el[0].parentNode);
return $(document);
}(this);
},
drag: function(e,ui) {
var o = ui.options;
var i = ui.instance;
if(i.overflowY[0] != document && i.overflowY[0].tagName != 'HTML') {
if(i.overflowY[0].offsetHeight - (ui.position.top - i.overflowY[0].scrollTop + i.clickOffset.top) < o.scrollSensitivity)
i.overflowY[0].scrollTop = i.overflowY[0].scrollTop + o.scrollSpeed;
if((ui.position.top - i.overflowY[0].scrollTop + i.clickOffset.top) < o.scrollSensitivity)
i.overflowY[0].scrollTop = i.overflowY[0].scrollTop - o.scrollSpeed;
} else {
//$(document.body).append('<p>'+(e.pageY - $(document).scrollTop())+'</p>');
if(e.pageY - $(document).scrollTop() < o.scrollSensitivity)
$(document).scrollTop($(document).scrollTop() - o.scrollSpeed);
if($(window).height() - (e.pageY - $(document).scrollTop()) < o.scrollSensitivity)
$(document).scrollTop($(document).scrollTop() + o.scrollSpeed);
}
if(i.overflowX[0] != document && i.overflowX[0].tagName != 'HTML') {
if(i.overflowX[0].offsetWidth - (ui.position.left - i.overflowX[0].scrollLeft + i.clickOffset.left) < o.scrollSensitivity)
i.overflowX[0].scrollLeft = i.overflowX[0].scrollLeft + o.scrollSpeed;
if((ui.position.top - i.overflowX[0].scrollLeft + i.clickOffset.left) < o.scrollSensitivity)
i.overflowX[0].scrollLeft = i.overflowX[0].scrollLeft - o.scrollSpeed;
} else {
if(e.pageX - $(document).scrollLeft() < o.scrollSensitivity)
$(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed);
if($(window).width() - (e.pageX - $(document).scrollLeft()) < o.scrollSensitivity)
$(document).scrollLeft($(document).scrollLeft() + o.scrollSpeed);
}
ui.instance.recallOffset(e);
}
});
$.ui.plugin.add("draggable", "snap", {
start: function(e,ui) {
ui.instance.snapElements = [];
$(ui.options.snap === true ? '.ui-draggable' : ui.options.snap).each(function() {
var $t = $(this); var $o = $t.offset();
if(this != ui.instance.element[0]) ui.instance.snapElements.push({
item: this,
width: $t.outerWidth(),
height: $t.outerHeight(),
top: $o.top,
left: $o.left
});
});
},
drag: function(e,ui) {
var d = ui.options.snapTolerance || 20;
var x1 = ui.absolutePosition.left, x2 = x1 + ui.instance.helperProportions.width,
y1 = ui.absolutePosition.top, y2 = y1 + ui.instance.helperProportions.height;
for (var i = ui.instance.snapElements.length - 1; i >= 0; i--){
var l = ui.instance.snapElements[i].left, r = l + ui.instance.snapElements[i].width,
t = ui.instance.snapElements[i].top, b = t + ui.instance.snapElements[i].height;
//Yes, I know, this is insane ;)
if(!((l-d < x1 && x1 < r+d && t-d < y1 && y1 < b+d) || (l-d < x1 && x1 < r+d && t-d < y2 && y2 < b+d) || (l-d < x2 && x2 < r+d && t-d < y1 && y1 < b+d) || (l-d < x2 && x2 < r+d && t-d < y2 && y2 < b+d))) continue;
if(ui.options.snapMode != 'inner') {
var ts = Math.abs(t - y2) <= 20;
var bs = Math.abs(b - y1) <= 20;
var ls = Math.abs(l - x2) <= 20;
var rs = Math.abs(r - x1) <= 20;
if(ts) ui.position.top = t - ui.instance.offset.top + ui.instance.clickOffset.top - ui.instance.helperProportions.height;
if(bs) ui.position.top = b - ui.instance.offset.top + ui.instance.clickOffset.top;
if(ls) ui.position.left = l - ui.instance.offset.left + ui.instance.clickOffset.left - ui.instance.helperProportions.width;
if(rs) ui.position.left = r - ui.instance.offset.left + ui.instance.clickOffset.left;
}
if(ui.options.snapMode != 'outer') {
var ts = Math.abs(t - y1) <= 20;
var bs = Math.abs(b - y2) <= 20;
var ls = Math.abs(l - x1) <= 20;
var rs = Math.abs(r - x2) <= 20;
if(ts) ui.position.top = t - ui.instance.offset.top + ui.instance.clickOffset.top;
if(bs) ui.position.top = b - ui.instance.offset.top + ui.instance.clickOffset.top - ui.instance.helperProportions.height;
if(ls) ui.position.left = l - ui.instance.offset.left + ui.instance.clickOffset.left;
if(rs) ui.position.left = r - ui.instance.offset.left + ui.instance.clickOffset.left - ui.instance.helperProportions.width;
}
};
}
});
//TODO: wrapHelper, snap
})(jQuery);
|
