ui.sortable.js 38 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019
  1. /*
  2. * jQuery UI Sortable 1.7.2
  3. *
  4. * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
  5. * Dual licensed under the MIT (MIT-LICENSE.txt)
  6. * and GPL (GPL-LICENSE.txt) licenses.
  7. *
  8. * http://docs.jquery.com/UI/Sortables
  9. *
  10. * Depends:
  11. * ui.core.js
  12. */
  13. (function($) {
  14. $.widget("ui.sortable", $.extend({}, $.ui.mouse, {
  15. _init: function() {
  16. var o = this.options;
  17. this.containerCache = {};
  18. this.element.addClass("ui-sortable");
  19. //Get the items
  20. this.refresh();
  21. //Let's determine if the items are floating
  22. this.floating = this.items.length ? (/left|right/).test(this.items[0].item.css('float')) : false;
  23. //Let's determine the parent's offset
  24. this.offset = this.element.offset();
  25. //Initialize mouse events for interaction
  26. this._mouseInit();
  27. },
  28. destroy: function() {
  29. this.element
  30. .removeClass("ui-sortable ui-sortable-disabled")
  31. .removeData("sortable")
  32. .unbind(".sortable");
  33. this._mouseDestroy();
  34. for ( var i = this.items.length - 1; i >= 0; i-- )
  35. this.items[i].item.removeData("sortable-item");
  36. },
  37. _mouseCapture: function(event, overrideHandle) {
  38. if (this.reverting) {
  39. return false;
  40. }
  41. if(this.options.disabled || this.options.type == 'static') return false;
  42. //We have to refresh the items data once first
  43. this._refreshItems(event);
  44. //Find out if the clicked node (or one of its parents) is a actual item in this.items
  45. var currentItem = null, self = this, nodes = $(event.target).parents().each(function() {
  46. if($.data(this, 'sortable-item') == self) {
  47. currentItem = $(this);
  48. return false;
  49. }
  50. });
  51. if($.data(event.target, 'sortable-item') == self) currentItem = $(event.target);
  52. if(!currentItem) return false;
  53. if(this.options.handle && !overrideHandle) {
  54. var validHandle = false;
  55. $(this.options.handle, currentItem).find("*").andSelf().each(function() { if(this == event.target) validHandle = true; });
  56. if(!validHandle) return false;
  57. }
  58. this.currentItem = currentItem;
  59. this._removeCurrentsFromItems();
  60. return true;
  61. },
  62. _mouseStart: function(event, overrideHandle, noActivation) {
  63. var o = this.options, self = this;
  64. this.currentContainer = this;
  65. //We only need to call refreshPositions, because the refreshItems call has been moved to mouseCapture
  66. this.refreshPositions();
  67. //Create and append the visible helper
  68. this.helper = this._createHelper(event);
  69. //Cache the helper size
  70. this._cacheHelperProportions();
  71. /*
  72. * - Position generation -
  73. * This block generates everything position related - it's the core of draggables.
  74. */
  75. //Cache the margins of the original element
  76. this._cacheMargins();
  77. //Get the next scrolling parent
  78. this.scrollParent = this.helper.scrollParent();
  79. //The element's absolute position on the page minus margins
  80. this.offset = this.currentItem.offset();
  81. this.offset = {
  82. top: this.offset.top - this.margins.top,
  83. left: this.offset.left - this.margins.left
  84. };
  85. // Only after we got the offset, we can change the helper's position to absolute
  86. // TODO: Still need to figure out a way to make relative sorting possible
  87. this.helper.css("position", "absolute");
  88. this.cssPosition = this.helper.css("position");
  89. $.extend(this.offset, {
  90. click: { //Where the click happened, relative to the element
  91. left: event.pageX - this.offset.left,
  92. top: event.pageY - this.offset.top
  93. },
  94. parent: this._getParentOffset(),
  95. relative: this._getRelativeOffset() //This is a relative to absolute position minus the actual position calculation - only used for relative positioned helper
  96. });
  97. //Generate the original position
  98. this.originalPosition = this._generatePosition(event);
  99. this.originalPageX = event.pageX;
  100. this.originalPageY = event.pageY;
  101. //Adjust the mouse offset relative to the helper if 'cursorAt' is supplied
  102. if(o.cursorAt)
  103. this._adjustOffsetFromHelper(o.cursorAt);
  104. //Cache the former DOM position
  105. this.domPosition = { prev: this.currentItem.prev()[0], parent: this.currentItem.parent()[0] };
  106. //If the helper is not the original, hide the original so it's not playing any role during the drag, won't cause anything bad this way
  107. if(this.helper[0] != this.currentItem[0]) {
  108. this.currentItem.hide();
  109. }
  110. //Create the placeholder
  111. this._createPlaceholder();
  112. //Set a containment if given in the options
  113. if(o.containment)
  114. this._setContainment();
  115. if(o.cursor) { // cursor option
  116. if ($('body').css("cursor")) this._storedCursor = $('body').css("cursor");
  117. $('body').css("cursor", o.cursor);
  118. }
  119. if(o.opacity) { // opacity option
  120. if (this.helper.css("opacity")) this._storedOpacity = this.helper.css("opacity");
  121. this.helper.css("opacity", o.opacity);
  122. }
  123. if(o.zIndex) { // zIndex option
  124. if (this.helper.css("zIndex")) this._storedZIndex = this.helper.css("zIndex");
  125. this.helper.css("zIndex", o.zIndex);
  126. }
  127. //Prepare scrolling
  128. if(this.scrollParent[0] != document && this.scrollParent[0].tagName != 'HTML')
  129. this.overflowOffset = this.scrollParent.offset();
  130. //Call callbacks
  131. this._trigger("start", event, this._uiHash());
  132. //Recache the helper size
  133. if(!this._preserveHelperProportions)
  134. this._cacheHelperProportions();
  135. //Post 'activate' events to possible containers
  136. if(!noActivation) {
  137. for (var i = this.containers.length - 1; i >= 0; i--) { this.containers[i]._trigger("activate", event, self._uiHash(this)); }
  138. }
  139. //Prepare possible droppables
  140. if($.ui.ddmanager)
  141. $.ui.ddmanager.current = this;
  142. if ($.ui.ddmanager && !o.dropBehaviour)
  143. $.ui.ddmanager.prepareOffsets(this, event);
  144. this.dragging = true;
  145. this.helper.addClass("ui-sortable-helper");
  146. this._mouseDrag(event); //Execute the drag once - this causes the helper not to be visible before getting its correct position
  147. return true;
  148. },
  149. _mouseDrag: function(event) {
  150. //Compute the helpers position
  151. this.position = this._generatePosition(event);
  152. this.positionAbs = this._convertPositionTo("absolute");
  153. if (!this.lastPositionAbs) {
  154. this.lastPositionAbs = this.positionAbs;
  155. }
  156. //Do scrolling
  157. if(this.options.scroll) {
  158. var o = this.options, scrolled = false;
  159. if(this.scrollParent[0] != document && this.scrollParent[0].tagName != 'HTML') {
  160. if((this.overflowOffset.top + this.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity)
  161. this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop + o.scrollSpeed;
  162. else if(event.pageY - this.overflowOffset.top < o.scrollSensitivity)
  163. this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop - o.scrollSpeed;
  164. if((this.overflowOffset.left + this.scrollParent[0].offsetWidth) - event.pageX < o.scrollSensitivity)
  165. this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft + o.scrollSpeed;
  166. else if(event.pageX - this.overflowOffset.left < o.scrollSensitivity)
  167. this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft - o.scrollSpeed;
  168. } else {
  169. if(event.pageY - $(document).scrollTop() < o.scrollSensitivity)
  170. scrolled = $(document).scrollTop($(document).scrollTop() - o.scrollSpeed);
  171. else if($(window).height() - (event.pageY - $(document).scrollTop()) < o.scrollSensitivity)
  172. scrolled = $(document).scrollTop($(document).scrollTop() + o.scrollSpeed);
  173. if(event.pageX - $(document).scrollLeft() < o.scrollSensitivity)
  174. scrolled = $(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed);
  175. else if($(window).width() - (event.pageX - $(document).scrollLeft()) < o.scrollSensitivity)
  176. scrolled = $(document).scrollLeft($(document).scrollLeft() + o.scrollSpeed);
  177. }
  178. if(scrolled !== false && $.ui.ddmanager && !o.dropBehaviour)
  179. $.ui.ddmanager.prepareOffsets(this, event);
  180. }
  181. //Regenerate the absolute position used for position checks
  182. this.positionAbs = this._convertPositionTo("absolute");
  183. //Set the helper position
  184. if(!this.options.axis || this.options.axis != "y") this.helper[0].style.left = this.position.left+'px';
  185. if(!this.options.axis || this.options.axis != "x") this.helper[0].style.top = this.position.top+'px';
  186. //Rearrange
  187. for (var i = this.items.length - 1; i >= 0; i--) {
  188. //Cache variables and intersection, continue if no intersection
  189. var item = this.items[i], itemElement = item.item[0], intersection = this._intersectsWithPointer(item);
  190. if (!intersection) continue;
  191. if(itemElement != this.currentItem[0] //cannot intersect with itself
  192. && this.placeholder[intersection == 1 ? "next" : "prev"]()[0] != itemElement //no useless actions that have been done before
  193. && !$.ui.contains(this.placeholder[0], itemElement) //no action if the item moved is the parent of the item checked
  194. && (this.options.type == 'semi-dynamic' ? !$.ui.contains(this.element[0], itemElement) : true)
  195. ) {
  196. this.direction = intersection == 1 ? "down" : "up";
  197. if (this.options.tolerance == "pointer" || this._intersectsWithSides(item)) {
  198. this._rearrange(event, item);
  199. } else {
  200. break;
  201. }
  202. this._trigger("change", event, this._uiHash());
  203. break;
  204. }
  205. }
  206. //Post events to containers
  207. this._contactContainers(event);
  208. //Interconnect with droppables
  209. if($.ui.ddmanager) $.ui.ddmanager.drag(this, event);
  210. //Call callbacks
  211. this._trigger('sort', event, this._uiHash());
  212. this.lastPositionAbs = this.positionAbs;
  213. return false;
  214. },
  215. _mouseStop: function(event, noPropagation) {
  216. if(!event) return;
  217. //If we are using droppables, inform the manager about the drop
  218. if ($.ui.ddmanager && !this.options.dropBehaviour)
  219. $.ui.ddmanager.drop(this, event);
  220. if(this.options.revert) {
  221. var self = this;
  222. var cur = self.placeholder.offset();
  223. self.reverting = true;
  224. $(this.helper).animate({
  225. left: cur.left - this.offset.parent.left - self.margins.left + (this.offsetParent[0] == document.body ? 0 : this.offsetParent[0].scrollLeft),
  226. top: cur.top - this.offset.parent.top - self.margins.top + (this.offsetParent[0] == document.body ? 0 : this.offsetParent[0].scrollTop)
  227. }, parseInt(this.options.revert, 10) || 500, function() {
  228. self._clear(event);
  229. });
  230. } else {
  231. this._clear(event, noPropagation);
  232. }
  233. return false;
  234. },
  235. cancel: function() {
  236. var self = this;
  237. if(this.dragging) {
  238. this._mouseUp();
  239. if(this.options.helper == "original")
  240. this.currentItem.css(this._storedCSS).removeClass("ui-sortable-helper");
  241. else
  242. this.currentItem.show();
  243. //Post deactivating events to containers
  244. for (var i = this.containers.length - 1; i >= 0; i--){
  245. this.containers[i]._trigger("deactivate", null, self._uiHash(this));
  246. if(this.containers[i].containerCache.over) {
  247. this.containers[i]._trigger("out", null, self._uiHash(this));
  248. this.containers[i].containerCache.over = 0;
  249. }
  250. }
  251. }
  252. //$(this.placeholder[0]).remove(); would have been the jQuery way - unfortunately, it unbinds ALL events from the original node!
  253. if(this.placeholder[0].parentNode) this.placeholder[0].parentNode.removeChild(this.placeholder[0]);
  254. if(this.options.helper != "original" && this.helper && this.helper[0].parentNode) this.helper.remove();
  255. $.extend(this, {
  256. helper: null,
  257. dragging: false,
  258. reverting: false,
  259. _noFinalSort: null
  260. });
  261. if(this.domPosition.prev) {
  262. $(this.domPosition.prev).after(this.currentItem);
  263. } else {
  264. $(this.domPosition.parent).prepend(this.currentItem);
  265. }
  266. return true;
  267. },
  268. serialize: function(o) {
  269. var items = this._getItemsAsjQuery(o && o.connected);
  270. var str = []; o = o || {};
  271. $(items).each(function() {
  272. var res = ($(o.item || this).attr(o.attribute || 'id') || '').match(o.expression || (/(.+)[-=_](.+)/));
  273. if(res) str.push((o.key || res[1]+'[]')+'='+(o.key && o.expression ? res[1] : res[2]));
  274. });
  275. return str.join('&');
  276. },
  277. toArray: function(o) {
  278. var items = this._getItemsAsjQuery(o && o.connected);
  279. var ret = []; o = o || {};
  280. items.each(function() { ret.push($(o.item || this).attr(o.attribute || 'id') || ''); });
  281. return ret;
  282. },
  283. /* Be careful with the following core functions */
  284. _intersectsWith: function(item) {
  285. var x1 = this.positionAbs.left,
  286. x2 = x1 + this.helperProportions.width,
  287. y1 = this.positionAbs.top,
  288. y2 = y1 + this.helperProportions.height;
  289. var l = item.left,
  290. r = l + item.width,
  291. t = item.top,
  292. b = t + item.height;
  293. var dyClick = this.offset.click.top,
  294. dxClick = this.offset.click.left;
  295. var isOverElement = (y1 + dyClick) > t && (y1 + dyClick) < b && (x1 + dxClick) > l && (x1 + dxClick) < r;
  296. if( this.options.tolerance == "pointer"
  297. || this.options.forcePointerForContainers
  298. || (this.options.tolerance != "pointer" && this.helperProportions[this.floating ? 'width' : 'height'] > item[this.floating ? 'width' : 'height'])
  299. ) {
  300. return isOverElement;
  301. } else {
  302. return (l < x1 + (this.helperProportions.width / 2) // Right Half
  303. && x2 - (this.helperProportions.width / 2) < r // Left Half
  304. && t < y1 + (this.helperProportions.height / 2) // Bottom Half
  305. && y2 - (this.helperProportions.height / 2) < b ); // Top Half
  306. }
  307. },
  308. _intersectsWithPointer: function(item) {
  309. var isOverElementHeight = $.ui.isOverAxis(this.positionAbs.top + this.offset.click.top, item.top, item.height),
  310. isOverElementWidth = $.ui.isOverAxis(this.positionAbs.left + this.offset.click.left, item.left, item.width),
  311. isOverElement = isOverElementHeight && isOverElementWidth,
  312. verticalDirection = this._getDragVerticalDirection(),
  313. horizontalDirection = this._getDragHorizontalDirection();
  314. if (!isOverElement)
  315. return false;
  316. return this.floating ?
  317. ( ((horizontalDirection && horizontalDirection == "right") || verticalDirection == "down") ? 2 : 1 )
  318. : ( verticalDirection && (verticalDirection == "down" ? 2 : 1) );
  319. },
  320. _intersectsWithSides: function(item) {
  321. var isOverBottomHalf = $.ui.isOverAxis(this.positionAbs.top + this.offset.click.top, item.top + (item.height/2), item.height),
  322. isOverRightHalf = $.ui.isOverAxis(this.positionAbs.left + this.offset.click.left, item.left + (item.width/2), item.width),
  323. verticalDirection = this._getDragVerticalDirection(),
  324. horizontalDirection = this._getDragHorizontalDirection();
  325. if (this.floating && horizontalDirection) {
  326. return ((horizontalDirection == "right" && isOverRightHalf) || (horizontalDirection == "left" && !isOverRightHalf));
  327. } else {
  328. return verticalDirection && ((verticalDirection == "down" && isOverBottomHalf) || (verticalDirection == "up" && !isOverBottomHalf));
  329. }
  330. },
  331. _getDragVerticalDirection: function() {
  332. var delta = this.positionAbs.top - this.lastPositionAbs.top;
  333. return delta != 0 && (delta > 0 ? "down" : "up");
  334. },
  335. _getDragHorizontalDirection: function() {
  336. var delta = this.positionAbs.left - this.lastPositionAbs.left;
  337. return delta != 0 && (delta > 0 ? "right" : "left");
  338. },
  339. refresh: function(event) {
  340. this._refreshItems(event);
  341. this.refreshPositions();
  342. },
  343. _connectWith: function() {
  344. var options = this.options;
  345. return options.connectWith.constructor == String
  346. ? [options.connectWith]
  347. : options.connectWith;
  348. },
  349. _getItemsAsjQuery: function(connected) {
  350. var self = this;
  351. var items = [];
  352. var queries = [];
  353. var connectWith = this._connectWith();
  354. if(connectWith && connected) {
  355. for (var i = connectWith.length - 1; i >= 0; i--){
  356. var cur = $(connectWith[i]);
  357. for (var j = cur.length - 1; j >= 0; j--){
  358. var inst = $.data(cur[j], 'sortable');
  359. if(inst && inst != this && !inst.options.disabled) {
  360. queries.push([$.isFunction(inst.options.items) ? inst.options.items.call(inst.element) : $(inst.options.items, inst.element).not(".ui-sortable-helper"), inst]);
  361. }
  362. };
  363. };
  364. }
  365. queries.push([$.isFunction(this.options.items) ? this.options.items.call(this.element, null, { options: this.options, item: this.currentItem }) : $(this.options.items, this.element).not(".ui-sortable-helper"), this]);
  366. for (var i = queries.length - 1; i >= 0; i--){
  367. queries[i][0].each(function() {
  368. items.push(this);
  369. });
  370. };
  371. return $(items);
  372. },
  373. _removeCurrentsFromItems: function() {
  374. var list = this.currentItem.find(":data(sortable-item)");
  375. for (var i=0; i < this.items.length; i++) {
  376. for (var j=0; j < list.length; j++) {
  377. if(list[j] == this.items[i].item[0])
  378. this.items.splice(i,1);
  379. };
  380. };
  381. },
  382. _refreshItems: function(event) {
  383. this.items = [];
  384. this.containers = [this];
  385. var items = this.items;
  386. var self = this;
  387. var queries = [[$.isFunction(this.options.items) ? this.options.items.call(this.element[0], event, { item: this.currentItem }) : $(this.options.items, this.element), this]];
  388. var connectWith = this._connectWith();
  389. if(connectWith) {
  390. for (var i = connectWith.length - 1; i >= 0; i--){
  391. var cur = $(connectWith[i]);
  392. for (var j = cur.length - 1; j >= 0; j--){
  393. var inst = $.data(cur[j], 'sortable');
  394. if(inst && inst != this && !inst.options.disabled) {
  395. queries.push([$.isFunction(inst.options.items) ? inst.options.items.call(inst.element[0], event, { item: this.currentItem }) : $(inst.options.items, inst.element), inst]);
  396. this.containers.push(inst);
  397. }
  398. };
  399. };
  400. }
  401. for (var i = queries.length - 1; i >= 0; i--) {
  402. var targetData = queries[i][1];
  403. var _queries = queries[i][0];
  404. for (var j=0, queriesLength = _queries.length; j < queriesLength; j++) {
  405. var item = $(_queries[j]);
  406. item.data('sortable-item', targetData); // Data for target checking (mouse manager)
  407. items.push({
  408. item: item,
  409. instance: targetData,
  410. width: 0, height: 0,
  411. left: 0, top: 0
  412. });
  413. };
  414. };
  415. },
  416. refreshPositions: function(fast) {
  417. //This has to be redone because due to the item being moved out/into the offsetParent, the offsetParent's position will change
  418. if(this.offsetParent && this.helper) {
  419. this.offset.parent = this._getParentOffset();
  420. }
  421. for (var i = this.items.length - 1; i >= 0; i--){
  422. var item = this.items[i];
  423. //We ignore calculating positions of all connected containers when we're not over them
  424. if(item.instance != this.currentContainer && this.currentContainer && item.item[0] != this.currentItem[0])
  425. continue;
  426. var t = this.options.toleranceElement ? $(this.options.toleranceElement, item.item) : item.item;
  427. if (!fast) {
  428. item.width = t.outerWidth();
  429. item.height = t.outerHeight();
  430. }
  431. var p = t.offset();
  432. item.left = p.left;
  433. item.top = p.top;
  434. };
  435. if(this.options.custom && this.options.custom.refreshContainers) {
  436. this.options.custom.refreshContainers.call(this);
  437. } else {
  438. for (var i = this.containers.length - 1; i >= 0; i--){
  439. var p = this.containers[i].element.offset();
  440. this.containers[i].containerCache.left = p.left;
  441. this.containers[i].containerCache.top = p.top;
  442. this.containers[i].containerCache.width = this.containers[i].element.outerWidth();
  443. this.containers[i].containerCache.height = this.containers[i].element.outerHeight();
  444. };
  445. }
  446. },
  447. _createPlaceholder: function(that) {
  448. var self = that || this, o = self.options;
  449. if(!o.placeholder || o.placeholder.constructor == String) {
  450. var className = o.placeholder;
  451. o.placeholder = {
  452. element: function() {
  453. var el = $(document.createElement(self.currentItem[0].nodeName))
  454. .addClass(className || self.currentItem[0].className+" ui-sortable-placeholder")
  455. .removeClass("ui-sortable-helper")[0];
  456. if(!className)
  457. el.style.visibility = "hidden";
  458. return el;
  459. },
  460. update: function(container, p) {
  461. // 1. If a className is set as 'placeholder option, we don't force sizes - the class is responsible for that
  462. // 2. The option 'forcePlaceholderSize can be enabled to force it even if a class name is specified
  463. if(className && !o.forcePlaceholderSize) return;
  464. //If the element doesn't have a actual height by itself (without styles coming from a stylesheet), it receives the inline height from the dragged item
  465. if(!p.height()) { p.height(self.currentItem.innerHeight() - parseInt(self.currentItem.css('paddingTop')||0, 10) - parseInt(self.currentItem.css('paddingBottom')||0, 10)); };
  466. if(!p.width()) { p.width(self.currentItem.innerWidth() - parseInt(self.currentItem.css('paddingLeft')||0, 10) - parseInt(self.currentItem.css('paddingRight')||0, 10)); };
  467. }
  468. };
  469. }
  470. //Create the placeholder
  471. self.placeholder = $(o.placeholder.element.call(self.element, self.currentItem));
  472. //Append it after the actual current item
  473. self.currentItem.after(self.placeholder);
  474. //Update the size of the placeholder (TODO: Logic to fuzzy, see line 316/317)
  475. o.placeholder.update(self, self.placeholder);
  476. },
  477. _contactContainers: function(event) {
  478. for (var i = this.containers.length - 1; i >= 0; i--){
  479. if(this._intersectsWith(this.containers[i].containerCache)) {
  480. if(!this.containers[i].containerCache.over) {
  481. if(this.currentContainer != this.containers[i]) {
  482. //When entering a new container, we will find the item with the least distance and append our item near it
  483. var dist = 10000; var itemWithLeastDistance = null; var base = this.positionAbs[this.containers[i].floating ? 'left' : 'top'];
  484. for (var j = this.items.length - 1; j >= 0; j--) {
  485. if(!$.ui.contains(this.containers[i].element[0], this.items[j].item[0])) continue;
  486. var cur = this.items[j][this.containers[i].floating ? 'left' : 'top'];
  487. if(Math.abs(cur - base) < dist) {
  488. dist = Math.abs(cur - base); itemWithLeastDistance = this.items[j];
  489. }
  490. }
  491. if(!itemWithLeastDistance && !this.options.dropOnEmpty) //Check if dropOnEmpty is enabled
  492. continue;
  493. this.currentContainer = this.containers[i];
  494. itemWithLeastDistance ? this._rearrange(event, itemWithLeastDistance, null, true) : this._rearrange(event, null, this.containers[i].element, true);
  495. this._trigger("change", event, this._uiHash());
  496. this.containers[i]._trigger("change", event, this._uiHash(this));
  497. //Update the placeholder
  498. this.options.placeholder.update(this.currentContainer, this.placeholder);
  499. }
  500. this.containers[i]._trigger("over", event, this._uiHash(this));
  501. this.containers[i].containerCache.over = 1;
  502. }
  503. } else {
  504. if(this.containers[i].containerCache.over) {
  505. this.containers[i]._trigger("out", event, this._uiHash(this));
  506. this.containers[i].containerCache.over = 0;
  507. }
  508. }
  509. };
  510. },
  511. _createHelper: function(event) {
  512. var o = this.options;
  513. var helper = $.isFunction(o.helper) ? $(o.helper.apply(this.element[0], [event, this.currentItem])) : (o.helper == 'clone' ? this.currentItem.clone() : this.currentItem);
  514. if(!helper.parents('body').length) //Add the helper to the DOM if that didn't happen already
  515. $(o.appendTo != 'parent' ? o.appendTo : this.currentItem[0].parentNode)[0].appendChild(helper[0]);
  516. if(helper[0] == this.currentItem[0])
  517. this._storedCSS = { width: this.currentItem[0].style.width, height: this.currentItem[0].style.height, position: this.currentItem.css("position"), top: this.currentItem.css("top"), left: this.currentItem.css("left") };
  518. if(helper[0].style.width == '' || o.forceHelperSize) helper.width(this.currentItem.width());
  519. if(helper[0].style.height == '' || o.forceHelperSize) helper.height(this.currentItem.height());
  520. return helper;
  521. },
  522. _adjustOffsetFromHelper: function(obj) {
  523. if(obj.left != undefined) this.offset.click.left = obj.left + this.margins.left;
  524. if(obj.right != undefined) this.offset.click.left = this.helperProportions.width - obj.right + this.margins.left;
  525. if(obj.top != undefined) this.offset.click.top = obj.top + this.margins.top;
  526. if(obj.bottom != undefined) this.offset.click.top = this.helperProportions.height - obj.bottom + this.margins.top;
  527. },
  528. _getParentOffset: function() {
  529. //Get the offsetParent and cache its position
  530. this.offsetParent = this.helper.offsetParent();
  531. var po = this.offsetParent.offset();
  532. // This is a special case where we need to modify a offset calculated on start, since the following happened:
  533. // 1. The position of the helper is absolute, so it's position is calculated based on the next positioned parent
  534. // 2. The actual offset parent is a child of the scroll parent, and the scroll parent isn't the document, which means that
  535. // the scroll is included in the initial calculation of the offset of the parent, and never recalculated upon drag
  536. if(this.cssPosition == 'absolute' && this.scrollParent[0] != document && $.ui.contains(this.scrollParent[0], this.offsetParent[0])) {
  537. po.left += this.scrollParent.scrollLeft();
  538. po.top += this.scrollParent.scrollTop();
  539. }
  540. if((this.offsetParent[0] == document.body) //This needs to be actually done for all browsers, since pageX/pageY includes this information
  541. || (this.offsetParent[0].tagName && this.offsetParent[0].tagName.toLowerCase() == 'html' && $.browser.msie)) //Ugly IE fix
  542. po = { top: 0, left: 0 };
  543. return {
  544. top: po.top + (parseInt(this.offsetParent.css("borderTopWidth"),10) || 0),
  545. left: po.left + (parseInt(this.offsetParent.css("borderLeftWidth"),10) || 0)
  546. };
  547. },
  548. _getRelativeOffset: function() {
  549. if(this.cssPosition == "relative") {
  550. var p = this.currentItem.position();
  551. return {
  552. top: p.top - (parseInt(this.helper.css("top"),10) || 0) + this.scrollParent.scrollTop(),
  553. left: p.left - (parseInt(this.helper.css("left"),10) || 0) + this.scrollParent.scrollLeft()
  554. };
  555. } else {
  556. return { top: 0, left: 0 };
  557. }
  558. },
  559. _cacheMargins: function() {
  560. this.margins = {
  561. left: (parseInt(this.currentItem.css("marginLeft"),10) || 0),
  562. top: (parseInt(this.currentItem.css("marginTop"),10) || 0)
  563. };
  564. },
  565. _cacheHelperProportions: function() {
  566. this.helperProportions = {
  567. width: this.helper.outerWidth(),
  568. height: this.helper.outerHeight()
  569. };
  570. },
  571. _setContainment: function() {
  572. var o = this.options;
  573. if(o.containment == 'parent') o.containment = this.helper[0].parentNode;
  574. if(o.containment == 'document' || o.containment == 'window') this.containment = [
  575. 0 - this.offset.relative.left - this.offset.parent.left,
  576. 0 - this.offset.relative.top - this.offset.parent.top,
  577. $(o.containment == 'document' ? document : window).width() - this.helperProportions.width - this.margins.left,
  578. ($(o.containment == 'document' ? document : window).height() || document.body.parentNode.scrollHeight) - this.helperProportions.height - this.margins.top
  579. ];
  580. if(!(/^(document|window|parent)$/).test(o.containment)) {
  581. var ce = $(o.containment)[0];
  582. var co = $(o.containment).offset();
  583. var over = ($(ce).css("overflow") != 'hidden');
  584. this.containment = [
  585. co.left + (parseInt($(ce).css("borderLeftWidth"),10) || 0) + (parseInt($(ce).css("paddingLeft"),10) || 0) - this.margins.left,
  586. co.top + (parseInt($(ce).css("borderTopWidth"),10) || 0) + (parseInt($(ce).css("paddingTop"),10) || 0) - this.margins.top,
  587. co.left+(over ? Math.max(ce.scrollWidth,ce.offsetWidth) : ce.offsetWidth) - (parseInt($(ce).css("borderLeftWidth"),10) || 0) - (parseInt($(ce).css("paddingRight"),10) || 0) - this.helperProportions.width - this.margins.left,
  588. co.top+(over ? Math.max(ce.scrollHeight,ce.offsetHeight) : ce.offsetHeight) - (parseInt($(ce).css("borderTopWidth"),10) || 0) - (parseInt($(ce).css("paddingBottom"),10) || 0) - this.helperProportions.height - this.margins.top
  589. ];
  590. }
  591. },
  592. _convertPositionTo: function(d, pos) {
  593. if(!pos) pos = this.position;
  594. var mod = d == "absolute" ? 1 : -1;
  595. var o = this.options, scroll = this.cssPosition == 'absolute' && !(this.scrollParent[0] != document && $.ui.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent, scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName);
  596. return {
  597. top: (
  598. pos.top // The absolute mouse position
  599. + this.offset.relative.top * mod // Only for relative positioned nodes: Relative offset from element to offset parent
  600. + this.offset.parent.top * mod // The offsetParent's offset without borders (offset + border)
  601. - ($.browser.safari && this.cssPosition == 'fixed' ? 0 : ( this.cssPosition == 'fixed' ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) ) * mod)
  602. ),
  603. left: (
  604. pos.left // The absolute mouse position
  605. + this.offset.relative.left * mod // Only for relative positioned nodes: Relative offset from element to offset parent
  606. + this.offset.parent.left * mod // The offsetParent's offset without borders (offset + border)
  607. - ($.browser.safari && this.cssPosition == 'fixed' ? 0 : ( this.cssPosition == 'fixed' ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() ) * mod)
  608. )
  609. };
  610. },
  611. _generatePosition: function(event) {
  612. var o = this.options, scroll = this.cssPosition == 'absolute' && !(this.scrollParent[0] != document && $.ui.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent, scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName);
  613. // This is another very weird special case that only happens for relative elements:
  614. // 1. If the css position is relative
  615. // 2. and the scroll parent is the document or similar to the offset parent
  616. // we have to refresh the relative offset during the scroll so there are no jumps
  617. if(this.cssPosition == 'relative' && !(this.scrollParent[0] != document && this.scrollParent[0] != this.offsetParent[0])) {
  618. this.offset.relative = this._getRelativeOffset();
  619. }
  620. var pageX = event.pageX;
  621. var pageY = event.pageY;
  622. /*
  623. * - Position constraining -
  624. * Constrain the position to a mix of grid, containment.
  625. */
  626. if(this.originalPosition) { //If we are not dragging yet, we won't check for options
  627. if(this.containment) {
  628. if(event.pageX - this.offset.click.left < this.containment[0]) pageX = this.containment[0] + this.offset.click.left;
  629. if(event.pageY - this.offset.click.top < this.containment[1]) pageY = this.containment[1] + this.offset.click.top;
  630. if(event.pageX - this.offset.click.left > this.containment[2]) pageX = this.containment[2] + this.offset.click.left;
  631. if(event.pageY - this.offset.click.top > this.containment[3]) pageY = this.containment[3] + this.offset.click.top;
  632. }
  633. if(o.grid) {
  634. var top = this.originalPageY + Math.round((pageY - this.originalPageY) / o.grid[1]) * o.grid[1];
  635. pageY = this.containment ? (!(top - this.offset.click.top < this.containment[1] || top - this.offset.click.top > this.containment[3]) ? top : (!(top - this.offset.click.top < this.containment[1]) ? top - o.grid[1] : top + o.grid[1])) : top;
  636. var left = this.originalPageX + Math.round((pageX - this.originalPageX) / o.grid[0]) * o.grid[0];
  637. pageX = this.containment ? (!(left - this.offset.click.left < this.containment[0] || left - this.offset.click.left > this.containment[2]) ? left : (!(left - this.offset.click.left < this.containment[0]) ? left - o.grid[0] : left + o.grid[0])) : left;
  638. }
  639. }
  640. return {
  641. top: (
  642. pageY // The absolute mouse position
  643. - this.offset.click.top // Click offset (relative to the element)
  644. - this.offset.relative.top // Only for relative positioned nodes: Relative offset from element to offset parent
  645. - this.offset.parent.top // The offsetParent's offset without borders (offset + border)
  646. + ($.browser.safari && this.cssPosition == 'fixed' ? 0 : ( this.cssPosition == 'fixed' ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) ))
  647. ),
  648. left: (
  649. pageX // The absolute mouse position
  650. - this.offset.click.left // Click offset (relative to the element)
  651. - this.offset.relative.left // Only for relative positioned nodes: Relative offset from element to offset parent
  652. - this.offset.parent.left // The offsetParent's offset without borders (offset + border)
  653. + ($.browser.safari && this.cssPosition == 'fixed' ? 0 : ( this.cssPosition == 'fixed' ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() ))
  654. )
  655. };
  656. },
  657. _rearrange: function(event, i, a, hardRefresh) {
  658. a ? a[0].appendChild(this.placeholder[0]) : i.item[0].parentNode.insertBefore(this.placeholder[0], (this.direction == 'down' ? i.item[0] : i.item[0].nextSibling));
  659. //Various things done here to improve the performance:
  660. // 1. we create a setTimeout, that calls refreshPositions
  661. // 2. on the instance, we have a counter variable, that get's higher after every append
  662. // 3. on the local scope, we copy the counter variable, and check in the timeout, if it's still the same
  663. // 4. this lets only the last addition to the timeout stack through
  664. this.counter = this.counter ? ++this.counter : 1;
  665. var self = this, counter = this.counter;
  666. window.setTimeout(function() {
  667. if(counter == self.counter) self.refreshPositions(!hardRefresh); //Precompute after each DOM insertion, NOT on mousemove
  668. },0);
  669. },
  670. _clear: function(event, noPropagation) {
  671. this.reverting = false;
  672. // We delay all events that have to be triggered to after the point where the placeholder has been removed and
  673. // everything else normalized again
  674. var delayedTriggers = [], self = this;
  675. // We first have to update the dom position of the actual currentItem
  676. // Note: don't do it if the current item is already removed (by a user), or it gets reappended (see #4088)
  677. if(!this._noFinalSort && this.currentItem[0].parentNode) this.placeholder.before(this.currentItem);
  678. this._noFinalSort = null;
  679. if(this.helper[0] == this.currentItem[0]) {
  680. for(var i in this._storedCSS) {
  681. if(this._storedCSS[i] == 'auto' || this._storedCSS[i] == 'static') this._storedCSS[i] = '';
  682. }
  683. this.currentItem.css(this._storedCSS).removeClass("ui-sortable-helper");
  684. } else {
  685. this.currentItem.show();
  686. }
  687. if(this.fromOutside && !noPropagation) delayedTriggers.push(function(event) { this._trigger("receive", event, this._uiHash(this.fromOutside)); });
  688. if((this.fromOutside || this.domPosition.prev != this.currentItem.prev().not(".ui-sortable-helper")[0] || this.domPosition.parent != this.currentItem.parent()[0]) && !noPropagation) delayedTriggers.push(function(event) { this._trigger("update", event, this._uiHash()); }); //Trigger update callback if the DOM position has changed
  689. if(!$.ui.contains(this.element[0], this.currentItem[0])) { //Node was moved out of the current element
  690. if(!noPropagation) delayedTriggers.push(function(event) { this._trigger("remove", event, this._uiHash()); });
  691. for (var i = this.containers.length - 1; i >= 0; i--){
  692. if($.ui.contains(this.containers[i].element[0], this.currentItem[0]) && !noPropagation) {
  693. delayedTriggers.push((function(c) { return function(event) { c._trigger("receive", event, this._uiHash(this)); }; }).call(this, this.containers[i]));
  694. delayedTriggers.push((function(c) { return function(event) { c._trigger("update", event, this._uiHash(this)); }; }).call(this, this.containers[i]));
  695. }
  696. };
  697. };
  698. //Post events to containers
  699. for (var i = this.containers.length - 1; i >= 0; i--){
  700. if(!noPropagation) delayedTriggers.push((function(c) { return function(event) { c._trigger("deactivate", event, this._uiHash(this)); }; }).call(this, this.containers[i]));
  701. if(this.containers[i].containerCache.over) {
  702. delayedTriggers.push((function(c) { return function(event) { c._trigger("out", event, this._uiHash(this)); }; }).call(this, this.containers[i]));
  703. this.containers[i].containerCache.over = 0;
  704. }
  705. }
  706. //Do what was originally in plugins
  707. if(this._storedCursor) $('body').css("cursor", this._storedCursor); //Reset cursor
  708. if(this._storedOpacity) this.helper.css("opacity", this._storedOpacity); //Reset cursor
  709. if(this._storedZIndex) this.helper.css("zIndex", this._storedZIndex == 'auto' ? '' : this._storedZIndex); //Reset z-index
  710. this.dragging = false;
  711. if(this.cancelHelperRemoval) {
  712. if(!noPropagation) {
  713. this._trigger("beforeStop", event, this._uiHash());
  714. for (var i=0; i < delayedTriggers.length; i++) { delayedTriggers[i].call(this, event); }; //Trigger all delayed events
  715. this._trigger("stop", event, this._uiHash());
  716. }
  717. return false;
  718. }
  719. if(!noPropagation) this._trigger("beforeStop", event, this._uiHash());
  720. //$(this.placeholder[0]).remove(); would have been the jQuery way - unfortunately, it unbinds ALL events from the original node!
  721. this.placeholder[0].parentNode.removeChild(this.placeholder[0]);
  722. if(this.helper[0] != this.currentItem[0]) this.helper.remove(); this.helper = null;
  723. if(!noPropagation) {
  724. for (var i=0; i < delayedTriggers.length; i++) { delayedTriggers[i].call(this, event); }; //Trigger all delayed events
  725. this._trigger("stop", event, this._uiHash());
  726. }
  727. this.fromOutside = false;
  728. return true;
  729. },
  730. _trigger: function() {
  731. if ($.widget.prototype._trigger.apply(this, arguments) === false) {
  732. this.cancel();
  733. }
  734. },
  735. _uiHash: function(inst) {
  736. var self = inst || this;
  737. return {
  738. helper: self.helper,
  739. placeholder: self.placeholder || $([]),
  740. position: self.position,
  741. absolutePosition: self.positionAbs, //deprecated
  742. offset: self.positionAbs,
  743. item: self.currentItem,
  744. sender: inst ? inst.element : null
  745. };
  746. }
  747. }));
  748. $.extend($.ui.sortable, {
  749. getter: "serialize toArray",
  750. version: "1.7.2",
  751. eventPrefix: "sort",
  752. defaults: {
  753. appendTo: "parent",
  754. axis: false,
  755. cancel: ":input,option",
  756. connectWith: false,
  757. containment: false,
  758. cursor: 'auto',
  759. cursorAt: false,
  760. delay: 0,
  761. distance: 1,
  762. dropOnEmpty: true,
  763. forcePlaceholderSize: false,
  764. forceHelperSize: false,
  765. grid: false,
  766. handle: false,
  767. helper: "original",
  768. items: '> *',
  769. opacity: false,
  770. placeholder: false,
  771. revert: false,
  772. scroll: true,
  773. scrollSensitivity: 20,
  774. scrollSpeed: 20,
  775. scope: "default",
  776. tolerance: "intersect",
  777. zIndex: 1000
  778. }
  779. });
  780. })(jQuery);