sortable.js 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568
  1. /**
  2. * angular-ui-sortable - This directive allows you to jQueryUI Sortable.
  3. * @version v0.17.1 - 2017-04-15
  4. * @link http://angular-ui.github.com
  5. * @license MIT
  6. */
  7. (function(window, angular, undefined) {
  8. 'use strict';
  9. /*
  10. jQuery UI Sortable plugin wrapper
  11. @param [ui-sortable] {object} Options to pass to $.fn.sortable() merged onto ui.config
  12. */
  13. angular.module('ui.sortable', [])
  14. .value('uiSortableConfig',{
  15. // the default for jquery-ui sortable is "> *", we need to restrict this to
  16. // ng-repeat items
  17. // if the user uses
  18. items: '> [ng-repeat],> [data-ng-repeat],> [x-ng-repeat]'
  19. })
  20. .directive('uiSortable', [
  21. 'uiSortableConfig', '$timeout', '$log',
  22. function(uiSortableConfig, $timeout, $log) {
  23. return {
  24. require:'?ngModel',
  25. scope: {
  26. ngModel:'=',
  27. uiSortable:'=',
  28. ////Expression bindings from html.
  29. create:'&uiSortableCreate',
  30. // helper:'&uiSortableHelper',
  31. start:'&uiSortableStart',
  32. activate:'&uiSortableActivate',
  33. // sort:'&uiSortableSort',
  34. // change:'&uiSortableChange',
  35. // over:'&uiSortableOver',
  36. // out:'&uiSortableOut',
  37. beforeStop:'&uiSortableBeforeStop',
  38. update:'&uiSortableUpdate',
  39. remove:'&uiSortableRemove',
  40. receive:'&uiSortableReceive',
  41. deactivate:'&uiSortableDeactivate',
  42. stop:'&uiSortableStop'
  43. },
  44. link: function(scope, element, attrs, ngModel) {
  45. var savedNodes;
  46. var helper;
  47. function combineCallbacks(first, second){
  48. var firstIsFunc = typeof first === 'function';
  49. var secondIsFunc = typeof second === 'function';
  50. if(firstIsFunc && secondIsFunc) {
  51. return function() {
  52. first.apply(this, arguments);
  53. second.apply(this, arguments);
  54. };
  55. } else if (secondIsFunc) {
  56. return second;
  57. }
  58. return first;
  59. }
  60. function getSortableWidgetInstance(element) {
  61. // this is a fix to support jquery-ui prior to v1.11.x
  62. // otherwise we should be using `element.sortable('instance')`
  63. var data = element.data('ui-sortable');
  64. if (data && typeof data === 'object' && data.widgetFullName === 'ui-sortable') {
  65. return data;
  66. }
  67. return null;
  68. }
  69. function patchSortableOption(key, value) {
  70. if (callbacks[key]) {
  71. if( key === 'stop' ){
  72. // call apply after stop
  73. value = combineCallbacks(
  74. value, function() { scope.$apply(); });
  75. value = combineCallbacks(value, afterStop);
  76. }
  77. // wrap the callback
  78. value = combineCallbacks(callbacks[key], value);
  79. } else if (wrappers[key]) {
  80. value = wrappers[key](value);
  81. }
  82. // patch the options that need to have values set
  83. if (!value && (key === 'items' || key === 'ui-model-items')) {
  84. value = uiSortableConfig.items;
  85. }
  86. return value;
  87. }
  88. function patchUISortableOptions(newVal, oldVal, sortableWidgetInstance) {
  89. function addDummyOptionKey(value, key) {
  90. if (!(key in opts)) {
  91. // add the key in the opts object so that
  92. // the patch function detects and handles it
  93. opts[key] = null;
  94. }
  95. }
  96. // for this directive to work we have to attach some callbacks
  97. angular.forEach(callbacks, addDummyOptionKey);
  98. // only initialize it in case we have to
  99. // update some options of the sortable
  100. var optsDiff = null;
  101. if (oldVal) {
  102. // reset deleted options to default
  103. var defaultOptions;
  104. angular.forEach(oldVal, function(oldValue, key) {
  105. if (!newVal || !(key in newVal)) {
  106. if (key in directiveOpts) {
  107. if (key === 'ui-floating') {
  108. opts[key] = 'auto';
  109. } else {
  110. opts[key] = patchSortableOption(key, undefined);
  111. }
  112. return;
  113. }
  114. if (!defaultOptions) {
  115. defaultOptions = angular.element.ui.sortable().options;
  116. }
  117. var defaultValue = defaultOptions[key];
  118. defaultValue = patchSortableOption(key, defaultValue);
  119. if (!optsDiff) {
  120. optsDiff = {};
  121. }
  122. optsDiff[key] = defaultValue;
  123. opts[key] = defaultValue;
  124. }
  125. });
  126. }
  127. // update changed options
  128. angular.forEach(newVal, function(value, key) {
  129. // if it's a custom option of the directive,
  130. // handle it approprietly
  131. if (key in directiveOpts) {
  132. if (key === 'ui-floating' && (value === false || value === true) && sortableWidgetInstance) {
  133. sortableWidgetInstance.floating = value;
  134. }
  135. opts[key] = patchSortableOption(key, value);
  136. return;
  137. }
  138. value = patchSortableOption(key, value);
  139. if (!optsDiff) {
  140. optsDiff = {};
  141. }
  142. optsDiff[key] = value;
  143. opts[key] = value;
  144. });
  145. return optsDiff;
  146. }
  147. function getPlaceholderElement (element) {
  148. var placeholder = element.sortable('option','placeholder');
  149. // placeholder.element will be a function if the placeholder, has
  150. // been created (placeholder will be an object). If it hasn't
  151. // been created, either placeholder will be false if no
  152. // placeholder class was given or placeholder.element will be
  153. // undefined if a class was given (placeholder will be a string)
  154. if (placeholder && placeholder.element && typeof placeholder.element === 'function') {
  155. var result = placeholder.element();
  156. // workaround for jquery ui 1.9.x,
  157. // not returning jquery collection
  158. result = angular.element(result);
  159. return result;
  160. }
  161. return null;
  162. }
  163. function getPlaceholderExcludesludes (element, placeholder) {
  164. // exact match with the placeholder's class attribute to handle
  165. // the case that multiple connected sortables exist and
  166. // the placeholder option equals the class of sortable items
  167. var notCssSelector = opts['ui-model-items'].replace(/[^,]*>/g, '');
  168. var excludes = element.find('[class="' + placeholder.attr('class') + '"]:not(' + notCssSelector + ')');
  169. return excludes;
  170. }
  171. function hasSortingHelper (element, ui) {
  172. var helperOption = element.sortable('option','helper');
  173. return helperOption === 'clone' || (typeof helperOption === 'function' && ui.item.sortable.isCustomHelperUsed());
  174. }
  175. function getSortingHelper (element, ui/*, savedNodes*/) {
  176. var result = null;
  177. if (hasSortingHelper(element, ui) &&
  178. element.sortable( 'option', 'appendTo' ) === 'parent') {
  179. // The .ui-sortable-helper element (that's the default class name)
  180. result = helper;
  181. }
  182. return result;
  183. }
  184. // thanks jquery-ui
  185. function isFloating (item) {
  186. return (/left|right/).test(item.css('float')) || (/inline|table-cell/).test(item.css('display'));
  187. }
  188. function getElementContext(elementScopes, element) {
  189. for (var i = 0; i < elementScopes.length; i++) {
  190. var c = elementScopes[i];
  191. if (c.element[0] === element[0]) {
  192. return c;
  193. }
  194. }
  195. }
  196. function afterStop(e, ui) {
  197. ui.item.sortable._destroy();
  198. }
  199. // return the index of ui.item among the items
  200. // we can't just do ui.item.index() because there it might have siblings
  201. // which are not items
  202. function getItemIndex(item) {
  203. return item.parent()
  204. .find(opts['ui-model-items'])
  205. .index(item);
  206. }
  207. var opts = {};
  208. // directive specific options
  209. var directiveOpts = {
  210. 'ui-floating': undefined,
  211. 'ui-model-items': uiSortableConfig.items
  212. };
  213. var callbacks = {
  214. create: null,
  215. start: null,
  216. activate: null,
  217. // sort: null,
  218. // change: null,
  219. // over: null,
  220. // out: null,
  221. beforeStop: null,
  222. update: null,
  223. remove: null,
  224. receive: null,
  225. deactivate: null,
  226. stop: null
  227. };
  228. var wrappers = {
  229. helper: null
  230. };
  231. angular.extend(opts, directiveOpts, uiSortableConfig, scope.uiSortable);
  232. if (!angular.element.fn || !angular.element.fn.jquery) {
  233. $log.error('ui.sortable: jQuery should be included before AngularJS!');
  234. return;
  235. }
  236. function wireUp () {
  237. // When we add or remove elements, we need the sortable to 'refresh'
  238. // so it can find the new/removed elements.
  239. scope.$watchCollection('ngModel', function() {
  240. // Timeout to let ng-repeat modify the DOM
  241. $timeout(function() {
  242. // ensure that the jquery-ui-sortable widget instance
  243. // is still bound to the directive's element
  244. if (!!getSortableWidgetInstance(element)) {
  245. element.sortable('refresh');
  246. }
  247. }, 0, false);
  248. });
  249. callbacks.start = function(e, ui) {
  250. if (opts['ui-floating'] === 'auto') {
  251. // since the drag has started, the element will be
  252. // absolutely positioned, so we check its siblings
  253. var siblings = ui.item.siblings();
  254. var sortableWidgetInstance = getSortableWidgetInstance(angular.element(e.target));
  255. sortableWidgetInstance.floating = isFloating(siblings);
  256. }
  257. // Save the starting position of dragged item
  258. var index = getItemIndex(ui.item);
  259. ui.item.sortable = {
  260. model: ngModel.$modelValue[index],
  261. index: index,
  262. source: element,
  263. sourceList: ui.item.parent(),
  264. sourceModel: ngModel.$modelValue,
  265. cancel: function () {
  266. ui.item.sortable._isCanceled = true;
  267. },
  268. isCanceled: function () {
  269. return ui.item.sortable._isCanceled;
  270. },
  271. isCustomHelperUsed: function () {
  272. return !!ui.item.sortable._isCustomHelperUsed;
  273. },
  274. _isCanceled: false,
  275. _isCustomHelperUsed: ui.item.sortable._isCustomHelperUsed,
  276. _destroy: function () {
  277. angular.forEach(ui.item.sortable, function(value, key) {
  278. ui.item.sortable[key] = undefined;
  279. });
  280. },
  281. _connectedSortables: [],
  282. _getElementContext: function (element) {
  283. return getElementContext(this._connectedSortables, element);
  284. }
  285. };
  286. };
  287. callbacks.activate = function(e, ui) {
  288. var isSourceContext = ui.item.sortable.source === element;
  289. var savedNodesOrigin = isSourceContext ?
  290. ui.item.sortable.sourceList :
  291. element;
  292. var elementContext = {
  293. element: element,
  294. scope: scope,
  295. isSourceContext: isSourceContext,
  296. savedNodesOrigin: savedNodesOrigin
  297. };
  298. // save the directive's scope so that it is accessible from ui.item.sortable
  299. ui.item.sortable._connectedSortables.push(elementContext);
  300. // We need to make a copy of the current element's contents so
  301. // we can restore it after sortable has messed it up.
  302. // This is inside activate (instead of start) in order to save
  303. // both lists when dragging between connected lists.
  304. savedNodes = savedNodesOrigin.contents();
  305. helper = ui.helper;
  306. // If this list has a placeholder (the connected lists won't),
  307. // don't inlcude it in saved nodes.
  308. var placeholder = getPlaceholderElement(element);
  309. if (placeholder && placeholder.length) {
  310. var excludes = getPlaceholderExcludesludes(element, placeholder);
  311. savedNodes = savedNodes.not(excludes);
  312. }
  313. };
  314. callbacks.update = function(e, ui) {
  315. // Save current drop position but only if this is not a second
  316. // update that happens when moving between lists because then
  317. // the value will be overwritten with the old value
  318. if (!ui.item.sortable.received) {
  319. ui.item.sortable.dropindex = getItemIndex(ui.item);
  320. var droptarget = ui.item.closest('[ui-sortable], [data-ui-sortable], [x-ui-sortable]');
  321. ui.item.sortable.droptarget = droptarget;
  322. ui.item.sortable.droptargetList = ui.item.parent();
  323. var droptargetContext = ui.item.sortable._getElementContext(droptarget);
  324. ui.item.sortable.droptargetModel = droptargetContext.scope.ngModel;
  325. // Cancel the sort (let ng-repeat do the sort for us)
  326. // Don't cancel if this is the received list because it has
  327. // already been canceled in the other list, and trying to cancel
  328. // here will mess up the DOM.
  329. element.sortable('cancel');
  330. }
  331. // Put the nodes back exactly the way they started (this is very
  332. // important because ng-repeat uses comment elements to delineate
  333. // the start and stop of repeat sections and sortable doesn't
  334. // respect their order (even if we cancel, the order of the
  335. // comments are still messed up).
  336. var sortingHelper = !ui.item.sortable.received && getSortingHelper(element, ui, savedNodes);
  337. if (sortingHelper && sortingHelper.length) {
  338. // Restore all the savedNodes except from the sorting helper element.
  339. // That way it will be garbage collected.
  340. savedNodes = savedNodes.not(sortingHelper);
  341. }
  342. var elementContext = ui.item.sortable._getElementContext(element);
  343. savedNodes.appendTo(elementContext.savedNodesOrigin);
  344. // If this is the target connected list then
  345. // it's safe to clear the restored nodes since:
  346. // update is currently running and
  347. // stop is not called for the target list.
  348. if (ui.item.sortable.received) {
  349. savedNodes = null;
  350. }
  351. // If received is true (an item was dropped in from another list)
  352. // then we add the new item to this list otherwise wait until the
  353. // stop event where we will know if it was a sort or item was
  354. // moved here from another list
  355. if (ui.item.sortable.received && !ui.item.sortable.isCanceled()) {
  356. scope.$apply(function () {
  357. ngModel.$modelValue.splice(ui.item.sortable.dropindex, 0,
  358. ui.item.sortable.moved);
  359. });
  360. scope.$emit('ui-sortable:moved', ui);
  361. }
  362. };
  363. callbacks.stop = function(e, ui) {
  364. // If the received flag hasn't be set on the item, this is a
  365. // normal sort, if dropindex is set, the item was moved, so move
  366. // the items in the list.
  367. var wasMoved = ('dropindex' in ui.item.sortable) &&
  368. !ui.item.sortable.isCanceled();
  369. if (wasMoved && !ui.item.sortable.received) {
  370. scope.$apply(function () {
  371. ngModel.$modelValue.splice(
  372. ui.item.sortable.dropindex, 0,
  373. ngModel.$modelValue.splice(ui.item.sortable.index, 1)[0]);
  374. });
  375. scope.$emit('ui-sortable:moved', ui);
  376. } else if (!wasMoved &&
  377. !angular.equals(element.contents().toArray(), savedNodes.toArray())) {
  378. // if the item was not moved
  379. // and the DOM element order has changed,
  380. // then restore the elements
  381. // so that the ngRepeat's comment are correct.
  382. var sortingHelper = getSortingHelper(element, ui, savedNodes);
  383. if (sortingHelper && sortingHelper.length) {
  384. // Restore all the savedNodes except from the sorting helper element.
  385. // That way it will be garbage collected.
  386. savedNodes = savedNodes.not(sortingHelper);
  387. }
  388. var elementContext = ui.item.sortable._getElementContext(element);
  389. savedNodes.appendTo(elementContext.savedNodesOrigin);
  390. }
  391. // It's now safe to clear the savedNodes and helper
  392. // since stop is the last callback.
  393. savedNodes = null;
  394. helper = null;
  395. };
  396. callbacks.receive = function(e, ui) {
  397. // An item was dropped here from another list, set a flag on the
  398. // item.
  399. ui.item.sortable.received = true;
  400. };
  401. callbacks.remove = function(e, ui) {
  402. // Workaround for a problem observed in nested connected lists.
  403. // There should be an 'update' event before 'remove' when moving
  404. // elements. If the event did not fire, cancel sorting.
  405. if (!('dropindex' in ui.item.sortable)) {
  406. element.sortable('cancel');
  407. ui.item.sortable.cancel();
  408. }
  409. // Remove the item from this list's model and copy data into item,
  410. // so the next list can retrive it
  411. if (!ui.item.sortable.isCanceled()) {
  412. scope.$apply(function () {
  413. ui.item.sortable.moved = ngModel.$modelValue.splice(
  414. ui.item.sortable.index, 1)[0];
  415. });
  416. }
  417. };
  418. // setup attribute handlers
  419. angular.forEach(callbacks, function(value, key) {
  420. callbacks[key] = combineCallbacks(callbacks[key],
  421. function () {
  422. var attrHandler = scope[key];
  423. var attrHandlerFn;
  424. if (typeof attrHandler === 'function' &&
  425. ('uiSortable' + key.substring(0,1).toUpperCase() + key.substring(1)).length &&
  426. typeof (attrHandlerFn = attrHandler()) === 'function') {
  427. attrHandlerFn.apply(this, arguments);
  428. }
  429. });
  430. });
  431. wrappers.helper = function (inner) {
  432. if (inner && typeof inner === 'function') {
  433. return function (e, item) {
  434. var oldItemSortable = item.sortable;
  435. var index = getItemIndex(item);
  436. item.sortable = {
  437. model: ngModel.$modelValue[index],
  438. index: index,
  439. source: element,
  440. sourceList: item.parent(),
  441. sourceModel: ngModel.$modelValue,
  442. _restore: function () {
  443. angular.forEach(item.sortable, function(value, key) {
  444. item.sortable[key] = undefined;
  445. });
  446. item.sortable = oldItemSortable;
  447. }
  448. };
  449. var innerResult = inner.apply(this, arguments);
  450. item.sortable._restore();
  451. item.sortable._isCustomHelperUsed = item !== innerResult;
  452. return innerResult;
  453. };
  454. }
  455. return inner;
  456. };
  457. scope.$watchCollection('uiSortable', function(newVal, oldVal) {
  458. // ensure that the jquery-ui-sortable widget instance
  459. // is still bound to the directive's element
  460. var sortableWidgetInstance = getSortableWidgetInstance(element);
  461. if (!!sortableWidgetInstance) {
  462. var optsDiff = patchUISortableOptions(newVal, oldVal, sortableWidgetInstance);
  463. if (optsDiff) {
  464. element.sortable('option', optsDiff);
  465. }
  466. }
  467. }, true);
  468. patchUISortableOptions(opts);
  469. }
  470. function init () {
  471. if (ngModel) {
  472. wireUp();
  473. } else {
  474. $log.info('ui.sortable: ngModel not provided!', element);
  475. }
  476. // Create sortable
  477. element.sortable(opts);
  478. }
  479. function initIfEnabled () {
  480. if (scope.uiSortable && scope.uiSortable.disabled) {
  481. return false;
  482. }
  483. init();
  484. // Stop Watcher
  485. initIfEnabled.cancelWatcher();
  486. initIfEnabled.cancelWatcher = angular.noop;
  487. return true;
  488. }
  489. initIfEnabled.cancelWatcher = angular.noop;
  490. if (!initIfEnabled()) {
  491. initIfEnabled.cancelWatcher = scope.$watch('uiSortable.disabled', initIfEnabled);
  492. }
  493. }
  494. };
  495. }
  496. ]);
  497. })(window, window.angular);