` in the above example), and the (optional) second one being the nested list. The container element has to be set as the 'toleranceElement' in the options, and this, or one of its children, as the 'handle'.
51 |
52 | Also, the default list type is `
`.
53 |
54 | ## Custom Options
55 |
56 |
57 | - tabSize
58 | - How far right or left (in pixels) the item has to travel in order to be nested or to be sent outside its current list. Default: 20
59 | - disableNesting
60 | - The class name of the items that will not accept nested lists. Default: ui-nestedSortable-no-nesting
61 | - errorClass
62 | - The class given to the placeholder in case of error. Default: ui-nestedSortable-error
63 | - listType
64 | - The list type used (ordered or unordered). Default: ol
65 | - maxLevels
66 | - The maximum depth of nested items the list can accept. If set to '0' the levels are unlimited. Default: 0
67 | - protectRoot
68 | - Wether to protect the root level (i.e. root items can be sorted but not nested, sub-items cannot become root items). Default: false
69 | - rootID
70 | - The id given to the root element (set this to whatever suits your data structure). Default: null
71 | - rtl
72 | - Set this to true if you have a right-to-left page. Default: false
73 | - isAllowed (function)
74 | - You can specify a custom function to verify if a drop location is allowed. Default: function(item, parent) { return true; }
75 |
76 |
77 | ## Custom Methods
78 |
79 |
80 | - serialize
81 | - Serializes the nested list into a string like setName[item1Id]=parentId&setName[item2Id]=parentId, reading from each item's id formatted as 'setName_itemId' (where itemId is a number).
82 | It accepts the same options as the original Sortable method (key, attribute and expression).
83 | - toArray
84 | - Builds an array where each element is in the form:
85 |
setName[n] =>
86 | {
87 | 'item_id': itemId,
88 | 'parent_id': parentId,
89 | 'depth': depth,
90 | 'left': left,
91 | 'right': right,
92 | }
93 |
94 | It accepts the same options as the original Sortable method (attribute and expression) plus the custom startDepthCount, that sets the starting depth number (default is 0).
95 | - toHierarchy
96 | - Builds a hierarchical object in the form:
97 |
'0' ...
98 | 'id' => itemId
99 | '1' ...
100 | 'id' => itemId
101 | 'children' ...
102 | '0' ...
103 | 'id' => itemId
104 | '1' ...
105 | 'id' => itemId
106 | '2' ...
107 | 'id' => itemId
108 |
109 | Similarly to toArray, it accepts attribute and expression options.
110 |
111 |
112 | ## Known Bugs
113 |
114 | *nestedSortable* doesn't work properly with connected draggables, because of the way Draggable simulates Sortable `mouseStart` and `mouseStop` events. This bug might or might not be fixed some time in the future (it's not specific to this plugin).
115 |
116 | ## Requirements
117 |
118 | jQuery 1.4+
119 | jQuery UI Sortable 1.8+
120 |
121 | ## Browser Compatibility
122 |
123 | Tested with: IE 6/7/8, Firefox 3.6/4, Chrome, Safari 3
124 |
125 | ## License
126 |
127 | This work is licensed under the MIT License.
128 |
129 | This work is *pizzaware*. If it saved your life, or you just feel good at heart, please consider offering me a pizza. This can be done in two ways: (1) follow [this link](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=RSJEW3N9PRMYY&lc=IT&item_name=Manuele%20Sarfatti¤cy_code=EUR&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted) to donate through paypal; (2) send me cash via traditional mail to my home address in Italy. Is the second method legal? It is in Italy if you use Posta assicurata. You should check with your local laws if you live elsewhere.
130 |
131 |
--------------------------------------------------------------------------------
/jquery.mjs.nestedSortable.js:
--------------------------------------------------------------------------------
1 | /*
2 | * jQuery UI Nested Sortable
3 | * v 1.3.5 / 21 jun 2012
4 | * http://mjsarfatti.com/code/nestedSortable
5 | *
6 | * Depends on:
7 | * jquery.ui.sortable.js 1.8+
8 | *
9 | * Copyright (c) 2010-2012 Manuele J Sarfatti
10 | * Licensed under the MIT License
11 | * http://www.opensource.org/licenses/mit-license.php
12 | */
13 |
14 | (function($) {
15 |
16 | $.widget("mjs.nestedSortable", $.extend({}, $.ui.sortable.prototype, {
17 |
18 | options: {
19 | tabSize: 20,
20 | disableNesting: 'mjs-nestedSortable-no-nesting',
21 | errorClass: 'mjs-nestedSortable-error',
22 | doNotClear: false,
23 | listType: 'ol',
24 | maxLevels: 0,
25 | protectRoot: false,
26 | rootID: null,
27 | rtl: false,
28 | isAllowed: function(item, parent) { return true; }
29 | },
30 |
31 | _create: function() {
32 | this.element.data('sortable', this.element.data('nestedSortable'));
33 |
34 | if (!this.element.is(this.options.listType))
35 | throw new Error('nestedSortable: Please check the listType option is set to your actual list type');
36 |
37 | return $.ui.sortable.prototype._create.apply(this, arguments);
38 | },
39 |
40 | destroy: function() {
41 | this.element
42 | .removeData("nestedSortable")
43 | .unbind(".nestedSortable");
44 | return $.ui.sortable.prototype.destroy.apply(this, arguments);
45 | },
46 |
47 | _mouseDrag: function(event) {
48 |
49 | //Compute the helpers position
50 | this.position = this._generatePosition(event);
51 | this.positionAbs = this._convertPositionTo("absolute");
52 |
53 | if (!this.lastPositionAbs) {
54 | this.lastPositionAbs = this.positionAbs;
55 | }
56 |
57 | var o = this.options;
58 |
59 | //Do scrolling
60 | if(this.options.scroll) {
61 | var scrolled = false;
62 | if(this.scrollParent[0] != document && this.scrollParent[0].tagName != 'HTML') {
63 |
64 | if((this.overflowOffset.top + this.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity)
65 | this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop + o.scrollSpeed;
66 | else if(event.pageY - this.overflowOffset.top < o.scrollSensitivity)
67 | this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop - o.scrollSpeed;
68 |
69 | if((this.overflowOffset.left + this.scrollParent[0].offsetWidth) - event.pageX < o.scrollSensitivity)
70 | this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft + o.scrollSpeed;
71 | else if(event.pageX - this.overflowOffset.left < o.scrollSensitivity)
72 | this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft - o.scrollSpeed;
73 |
74 | } else {
75 |
76 | if(event.pageY - $(document).scrollTop() < o.scrollSensitivity)
77 | scrolled = $(document).scrollTop($(document).scrollTop() - o.scrollSpeed);
78 | else if($(window).height() - (event.pageY - $(document).scrollTop()) < o.scrollSensitivity)
79 | scrolled = $(document).scrollTop($(document).scrollTop() + o.scrollSpeed);
80 |
81 | if(event.pageX - $(document).scrollLeft() < o.scrollSensitivity)
82 | scrolled = $(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed);
83 | else if($(window).width() - (event.pageX - $(document).scrollLeft()) < o.scrollSensitivity)
84 | scrolled = $(document).scrollLeft($(document).scrollLeft() + o.scrollSpeed);
85 |
86 | }
87 |
88 | if(scrolled !== false && $.ui.ddmanager && !o.dropBehaviour)
89 | $.ui.ddmanager.prepareOffsets(this, event);
90 | }
91 |
92 | //Regenerate the absolute position used for position checks
93 | this.positionAbs = this._convertPositionTo("absolute");
94 |
95 | // Find the top offset before rearrangement,
96 | var previousTopOffset = this.placeholder.offset().top;
97 |
98 | //Set the helper position
99 | if(!this.options.axis || this.options.axis != "y") this.helper[0].style.left = this.position.left+'px';
100 | if(!this.options.axis || this.options.axis != "x") this.helper[0].style.top = this.position.top+'px';
101 |
102 | //Rearrange
103 | for (var i = this.items.length - 1; i >= 0; i--) {
104 |
105 | //Cache variables and intersection, continue if no intersection
106 | var item = this.items[i], itemElement = item.item[0], intersection = this._intersectsWithPointer(item);
107 | if (!intersection) continue;
108 |
109 | if(itemElement != this.currentItem[0] //cannot intersect with itself
110 | && this.placeholder[intersection == 1 ? "next" : "prev"]()[0] != itemElement //no useless actions that have been done before
111 | && !$.contains(this.placeholder[0], itemElement) //no action if the item moved is the parent of the item checked
112 | && (this.options.type == 'semi-dynamic' ? !$.contains(this.element[0], itemElement) : true)
113 | //&& itemElement.parentNode == this.placeholder[0].parentNode // only rearrange items within the same container
114 | ) {
115 |
116 | $(itemElement).mouseenter();
117 |
118 | this.direction = intersection == 1 ? "down" : "up";
119 |
120 | if (this.options.tolerance == "pointer" || this._intersectsWithSides(item)) {
121 | $(itemElement).mouseleave();
122 | this._rearrange(event, item);
123 | } else {
124 | break;
125 | }
126 |
127 | // Clear emtpy ul's/ol's
128 | this._clearEmpty(itemElement);
129 |
130 | this._trigger("change", event, this._uiHash());
131 | break;
132 | }
133 | }
134 |
135 | var parentItem = (this.placeholder[0].parentNode.parentNode &&
136 | $(this.placeholder[0].parentNode.parentNode).closest('.ui-sortable').length)
137 | ? $(this.placeholder[0].parentNode.parentNode)
138 | : null,
139 | level = this._getLevel(this.placeholder),
140 | childLevels = this._getChildLevels(this.helper);
141 |
142 | // To find the previous sibling in the list, keep backtracking until we hit a valid list item.
143 | var previousItem = this.placeholder[0].previousSibling ? $(this.placeholder[0].previousSibling) : null;
144 | if (previousItem != null) {
145 | while (previousItem[0].nodeName.toLowerCase() != 'li' || previousItem[0] == this.currentItem[0] || previousItem[0] == this.helper[0]) {
146 | if (previousItem[0].previousSibling) {
147 | previousItem = $(previousItem[0].previousSibling);
148 | } else {
149 | previousItem = null;
150 | break;
151 | }
152 | }
153 | }
154 |
155 | // To find the next sibling in the list, keep stepping forward until we hit a valid list item.
156 | var nextItem = this.placeholder[0].nextSibling ? $(this.placeholder[0].nextSibling) : null;
157 | if (nextItem != null) {
158 | while (nextItem[0].nodeName.toLowerCase() != 'li' || nextItem[0] == this.currentItem[0] || nextItem[0] == this.helper[0]) {
159 | if (nextItem[0].nextSibling) {
160 | nextItem = $(nextItem[0].nextSibling);
161 | } else {
162 | nextItem = null;
163 | break;
164 | }
165 | }
166 | }
167 |
168 | var newList = document.createElement(o.listType);
169 |
170 | this.beyondMaxLevels = 0;
171 |
172 | // If the item is moved to the left, send it to its parent's level unless there are siblings below it.
173 | if (parentItem != null && nextItem == null &&
174 | (o.rtl && (this.positionAbs.left + this.helper.outerWidth() > parentItem.offset().left + parentItem.outerWidth()) ||
175 | !o.rtl && (this.positionAbs.left < parentItem.offset().left))) {
176 | parentItem.after(this.placeholder[0]);
177 | this._clearEmpty(parentItem[0]);
178 | this._trigger("change", event, this._uiHash());
179 | }
180 | // If the item is below a sibling and is moved to the right, make it a child of that sibling.
181 | else if (previousItem != null &&
182 | (o.rtl && (this.positionAbs.left + this.helper.outerWidth() < previousItem.offset().left + previousItem.outerWidth() - o.tabSize) ||
183 | !o.rtl && (this.positionAbs.left > previousItem.offset().left + o.tabSize))) {
184 | this._isAllowed(previousItem, level, level+childLevels+1);
185 | if (!previousItem.children(o.listType).length) {
186 | previousItem[0].appendChild(newList);
187 | }
188 | // If this item is being moved from the top, add it to the top of the list.
189 | if (previousTopOffset && (previousTopOffset <= previousItem.offset().top)) {
190 | previousItem.children(o.listType).prepend(this.placeholder);
191 | }
192 | // Otherwise, add it to the bottom of the list.
193 | else {
194 | previousItem.children(o.listType)[0].appendChild(this.placeholder[0]);
195 | }
196 | this._trigger("change", event, this._uiHash());
197 | }
198 | else {
199 | this._isAllowed(parentItem, level, level+childLevels);
200 | }
201 |
202 | //Post events to containers
203 | this._contactContainers(event);
204 |
205 | //Interconnect with droppables
206 | if($.ui.ddmanager) $.ui.ddmanager.drag(this, event);
207 |
208 | //Call callbacks
209 | this._trigger('sort', event, this._uiHash());
210 |
211 | this.lastPositionAbs = this.positionAbs;
212 | return false;
213 |
214 | },
215 |
216 | _mouseStop: function(event, noPropagation) {
217 |
218 | // If the item is in a position not allowed, send it back
219 | if (this.beyondMaxLevels) {
220 |
221 | this.placeholder.removeClass(this.options.errorClass);
222 |
223 | if (this.domPosition.prev) {
224 | $(this.domPosition.prev).after(this.placeholder);
225 | } else {
226 | $(this.domPosition.parent).prepend(this.placeholder);
227 | }
228 |
229 | this._trigger("revert", event, this._uiHash());
230 |
231 | }
232 |
233 | // Clean last empty ul/ol
234 | for (var i = this.items.length - 1; i >= 0; i--) {
235 | var item = this.items[i].item[0];
236 | this._clearEmpty(item);
237 | }
238 |
239 | $.ui.sortable.prototype._mouseStop.apply(this, arguments);
240 |
241 | },
242 |
243 | serialize: function(options) {
244 |
245 | var o = $.extend({}, this.options, options),
246 | items = this._getItemsAsjQuery(o && o.connected),
247 | str = [];
248 |
249 | $(items).each(function() {
250 | var res = ($(o.item || this).attr(o.attribute || 'id') || '')
251 | .match(o.expression || (/(.+)[-=_](.+)/)),
252 | pid = ($(o.item || this).parent(o.listType)
253 | .parent(o.items)
254 | .attr(o.attribute || 'id') || '')
255 | .match(o.expression || (/(.+)[-=_](.+)/));
256 |
257 | if (res) {
258 | str.push(((o.key || res[1]) + '[' + (o.key && o.expression ? res[1] : res[2]) + ']')
259 | + '='
260 | + (pid ? (o.key && o.expression ? pid[1] : pid[2]) : o.rootID));
261 | }
262 | });
263 |
264 | if(!str.length && o.key) {
265 | str.push(o.key + '=');
266 | }
267 |
268 | return str.join('&');
269 |
270 | },
271 |
272 | toHierarchy: function(options) {
273 |
274 | var o = $.extend({}, this.options, options),
275 | sDepth = o.startDepthCount || 0,
276 | ret = [];
277 |
278 | $(this.element).children(o.items).each(function () {
279 | var level = _recursiveItems(this);
280 | ret.push(level);
281 | });
282 |
283 | return ret;
284 |
285 | function _recursiveItems(item) {
286 | var id = ($(item).attr(o.attribute || 'id') || '').match(o.expression || (/(.+)[-=_](.+)/));
287 | if (id) {
288 | var currentItem = {"id" : id[2]};
289 | if ($(item).children(o.listType).children(o.items).length > 0) {
290 | currentItem.children = [];
291 | $(item).children(o.listType).children(o.items).each(function() {
292 | var level = _recursiveItems(this);
293 | currentItem.children.push(level);
294 | });
295 | }
296 | return currentItem;
297 | }
298 | }
299 | },
300 |
301 | toArray: function(options) {
302 |
303 | var o = $.extend({}, this.options, options),
304 | sDepth = o.startDepthCount || 0,
305 | ret = [],
306 | left = 2;
307 |
308 | ret.push({
309 | "item_id": o.rootID,
310 | "parent_id": 'none',
311 | "depth": sDepth,
312 | "left": '1',
313 | "right": ($(o.items, this.element).length + 1) * 2
314 | });
315 |
316 | $(this.element).children(o.items).each(function () {
317 | left = _recursiveArray(this, sDepth + 1, left);
318 | });
319 |
320 | ret = ret.sort(function(a,b){ return (a.left - b.left); });
321 |
322 | return ret;
323 |
324 | function _recursiveArray(item, depth, left) {
325 |
326 | var right = left + 1,
327 | id,
328 | pid;
329 |
330 | if ($(item).children(o.listType).children(o.items).length > 0) {
331 | depth ++;
332 | $(item).children(o.listType).children(o.items).each(function () {
333 | right = _recursiveArray($(this), depth, right);
334 | });
335 | depth --;
336 | }
337 |
338 | id = ($(item).attr(o.attribute || 'id')).match(o.expression || (/(.+)[-=_](.+)/));
339 |
340 | if (depth === sDepth + 1) {
341 | pid = o.rootID;
342 | } else {
343 | var parentItem = ($(item).parent(o.listType)
344 | .parent(o.items)
345 | .attr(o.attribute || 'id'))
346 | .match(o.expression || (/(.+)[-=_](.+)/));
347 | pid = parentItem[2];
348 | }
349 |
350 | if (id) {
351 | ret.push({"item_id": id[2], "parent_id": pid, "depth": depth, "left": left, "right": right});
352 | }
353 |
354 | left = right + 1;
355 | return left;
356 | }
357 |
358 | },
359 |
360 | _clearEmpty: function(item) {
361 |
362 | var emptyList = $(item).children(this.options.listType);
363 | if (emptyList.length && !emptyList.children().length && !this.options.doNotClear) {
364 | emptyList.remove();
365 | }
366 |
367 | },
368 |
369 | _getLevel: function(item) {
370 |
371 | var level = 1;
372 |
373 | if (this.options.listType) {
374 | var list = item.closest(this.options.listType);
375 | while (list && list.length > 0 &&
376 | !list.is('.ui-sortable')) {
377 | level++;
378 | list = list.parent().closest(this.options.listType);
379 | }
380 | }
381 |
382 | return level;
383 | },
384 |
385 | _getChildLevels: function(parent, depth) {
386 | var self = this,
387 | o = this.options,
388 | result = 0;
389 | depth = depth || 0;
390 |
391 | $(parent).children(o.listType).children(o.items).each(function (index, child) {
392 | result = Math.max(self._getChildLevels(child, depth + 1), result);
393 | });
394 |
395 | return depth ? result + 1 : result;
396 | },
397 |
398 | _isAllowed: function(parentItem, level, levels) {
399 | var o = this.options,
400 | isRoot = $(this.domPosition.parent).hasClass('ui-sortable') ? true : false,
401 | maxLevels = this.placeholder.closest('.ui-sortable').nestedSortable('option', 'maxLevels'); // this takes into account the maxLevels set to the recipient list
402 |
403 | // Is the root protected?
404 | // Are we trying to nest under a no-nest?
405 | // Are we nesting too deep?
406 | if (!o.isAllowed(this.currentItem, parentItem) ||
407 | parentItem && parentItem.hasClass(o.disableNesting) ||
408 | o.protectRoot && (parentItem == null && !isRoot || isRoot && level > 1)) {
409 | this.placeholder.addClass(o.errorClass);
410 | if (maxLevels < levels && maxLevels != 0) {
411 | this.beyondMaxLevels = levels - maxLevels;
412 | } else {
413 | this.beyondMaxLevels = 1;
414 | }
415 | } else {
416 | if (maxLevels < levels && maxLevels != 0) {
417 | this.placeholder.addClass(o.errorClass);
418 | this.beyondMaxLevels = levels - maxLevels;
419 | } else {
420 | this.placeholder.removeClass(o.errorClass);
421 | this.beyondMaxLevels = 0;
422 | }
423 | }
424 | }
425 |
426 | }));
427 |
428 | $.mjs.nestedSortable.prototype.options = $.extend({}, $.ui.sortable.prototype.options, $.mjs.nestedSortable.prototype.options);
429 | })(jQuery);
430 |
--------------------------------------------------------------------------------