sortable结合angularjs实现拖动排序

记录拖动排序

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script><script src="https://cdn.staticfile.org/angular.js/1.6.6/angular.min.js"></script><script src="./sortable.js"></script>
</head>
<body ng-app="app"><div ng-controller="sortCtrl"><ul ui-sortable="sortableOptions" ng-model="data"><li ng-repeat="item in data "><span>{{item.name}}, {{item.age}}</span></li></ul></div>
</body><script>angular.module("app", ["ui.sortable"]).controller("sortCtrl", function($scope, $timeout) {$scope.cannotSort = false;$scope.data = [{"name": "allen","age": 21,"i": 0}, {"name": "bob","age": 18,"i": 1}, {"name": "curry","age": 25,"i": 2}, {"name": "david","age": 30,"i": 3}];$scope.sortableOptions = {// 数据有变化
                update: function(e, ui) {console.log("update");//需要使用延时方法，否则会输出原始数据的顺序，可能是BUG？
                    $timeout(function() {var resArr = [];for (var i = 0; i < $scope.data.length; i++) {resArr.push($scope.data[i].i);}console.log(resArr);})},// 完成拖拽动作
                stop: function(e, ui) {//do nothing
                    console.log("do nothing");}}})
</script></html>

sortable.js

/*jQuery UI Sortable plugin wrapper@param [ui-sortable] {object} Options to pass to $.fn.sortable() merged onto ui.config*/
angular.module('ui.sortable', []).value('uiSortableConfig', {// the default for jquery-ui sortable is "> *", we need to restrict this to// ng-repeat items// if the user usesitems: '> [ng-repeat],> [data-ng-repeat],> [x-ng-repeat]'}).directive('uiSortable', ['uiSortableConfig','$timeout','$log',function(uiSortableConfig, $timeout, $log) {return {require: '?ngModel',scope: {ngModel: '=',uiSortable: '=',Expression bindings from html.create: '&uiSortableCreate',// helper:'&uiSortableHelper',start: '&uiSortableStart',activate: '&uiSortableActivate',// sort:'&uiSortableSort',// change:'&uiSortableChange',// over:'&uiSortableOver',// out:'&uiSortableOut',beforeStop: '&uiSortableBeforeStop',update: '&uiSortableUpdate',remove: '&uiSortableRemove',receive: '&uiSortableReceive',deactivate: '&uiSortableDeactivate',stop: '&uiSortableStop'},link: function(scope, element, attrs, ngModel) {var savedNodes;var helper;function combineCallbacks(first, second) {var firstIsFunc = typeof first === 'function';var secondIsFunc = typeof second === 'function';if (firstIsFunc && secondIsFunc) {return function() {first.apply(this, arguments);second.apply(this, arguments);};} else if (secondIsFunc) {return second;}return first;}function getSortableWidgetInstance(element) {// this is a fix to support jquery-ui prior to v1.11.x// otherwise we should be using `element.sortable('instance')`var data = element.data('ui-sortable');if (data &&typeof data === 'object' &&data.widgetFullName === 'ui-sortable') {return data;}return null;}function setItemChildrenWidth(item) {item.children().each(function() {var $el = angular.element(this);// Preserve the with of the element$el.width($el.width());});}function dummyHelper(e, item) {return item;}function patchSortableOption(key, value) {if (callbacks[key]) {if (key === 'stop') {// call apply after stopvalue = combineCallbacks(value, function() {scope.$apply();});value = combineCallbacks(value, afterStop);}// wrap the callbackvalue = combineCallbacks(callbacks[key], value);} else if (wrappers[key]) {value = wrappers[key](value);}// patch the options that need to have values setif (!value && (key === 'items' || key === 'ui-model-items')) {value = uiSortableConfig.items;}return value;}function patchUISortableOptions(newOpts,oldOpts,sortableWidgetInstance) {function addDummyOptionKey(value, key) {if (!(key in opts)) {// add the key in the opts object so that// the patch function detects and handles itopts[key] = null;}}// for this directive to work we have to attach some callbacksangular.forEach(callbacks, addDummyOptionKey);// only initialize it in case we have to// update some options of the sortablevar optsDiff = null;if (oldOpts) {// reset deleted options to defaultvar defaultOptions;angular.forEach(oldOpts, function(oldValue, key) {if (!newOpts || !(key in newOpts)) {if (key in directiveOpts) {if (key === 'ui-floating') {opts[key] = 'auto';} else {opts[key] = patchSortableOption(key, undefined);}return;}if (!defaultOptions) {defaultOptions = angular.element.ui.sortable().options;}var defaultValue = defaultOptions[key];defaultValue = patchSortableOption(key, defaultValue);if (!optsDiff) {optsDiff = {};}optsDiff[key] = defaultValue;opts[key] = defaultValue;}});}newOpts = angular.extend({}, newOpts);// update changed options// handle the custom option of the directive firstangular.forEach(newOpts, function(value, key) {if (key in directiveOpts) {if (key === 'ui-floating' &&(value === false || value === true) &&sortableWidgetInstance) {sortableWidgetInstance.floating = value;}if (key === 'ui-preserve-size' &&(value === false || value === true)) {var userProvidedHelper = opts.helper;newOpts.helper = function(e, item) {if (opts['ui-preserve-size'] === true) {setItemChildrenWidth(item);}return (userProvidedHelper || dummyHelper).apply(this,arguments);};}opts[key] = patchSortableOption(key, value);}});// handle the normal option of the directiveangular.forEach(newOpts, function(value, key) {if (key in directiveOpts) {// the custom option of the directive are already handledreturn;}value = patchSortableOption(key, value);if (!optsDiff) {optsDiff = {};}optsDiff[key] = value;opts[key] = value;});return optsDiff;}function getPlaceholderElement(element) {var placeholder = element.sortable('option', 'placeholder');// placeholder.element will be a function if the placeholder, has// been created (placeholder will be an object).  If it hasn't// been created, either placeholder will be false if no// placeholder class was given or placeholder.element will be// undefined if a class was given (placeholder will be a string)if (placeholder &&placeholder.element &&typeof placeholder.element === 'function') {var result = placeholder.element();// workaround for jquery ui 1.9.x,// not returning jquery collectionresult = angular.element(result);return result;}return null;}function getPlaceholderExcludesludes(element, placeholder) {// exact match with the placeholder's class attribute to handle// the case that multiple connected sortables exist and// the placeholder option equals the class of sortable itemsvar notCssSelector = opts['ui-model-items'].replace(/[^,]*>/g, '');var excludes = element.find('[class="' +placeholder.attr('class') +'"]:not(' +notCssSelector +')');return excludes;}function hasSortingHelper(element, ui) {var helperOption = element.sortable('option', 'helper');return (helperOption === 'clone' ||(typeof helperOption === 'function' &&ui.item.sortable.isCustomHelperUsed()));}function getSortingHelper(element, ui /*, savedNodes*/) {var result = null;if (hasSortingHelper(element, ui) &&element.sortable('option', 'appendTo') === 'parent') {// The .ui-sortable-helper element (that's the default class name)result = helper;}return result;}// thanks jquery-uifunction isFloating(item) {return (/left|right/.test(item.css('float')) ||/inline|table-cell/.test(item.css('display')));}function getElementContext(elementScopes, element) {for (var i = 0; i < elementScopes.length; i++) {var c = elementScopes[i];if (c.element[0] === element[0]) {return c;}}}function afterStop(e, ui) {ui.item.sortable._destroy();}// return the index of ui.item among the items// we can't just do ui.item.index() because there it might have siblings// which are not itemsfunction getItemIndex(item) {return item.parent().find(opts['ui-model-items']).index(item);}var opts = {};// directive specific optionsvar directiveOpts = {'ui-floating': undefined,'ui-model-items': uiSortableConfig.items,'ui-preserve-size': undefined};var callbacks = {create: null,start: null,activate: null,// sort: null,// change: null,// over: null,// out: null,beforeStop: null,update: null,remove: null,receive: null,deactivate: null,stop: null};var wrappers = {helper: null};angular.extend(opts,directiveOpts,uiSortableConfig,scope.uiSortable);if (!angular.element.fn || !angular.element.fn.jquery) {$log.error('ui.sortable: jQuery should be included before AngularJS!');return;}function wireUp() {// When we add or remove elements, we need the sortable to 'refresh'// so it can find the new/removed elements.scope.$watchCollection('ngModel', function() {// Timeout to let ng-repeat modify the DOM$timeout(function() {// ensure that the jquery-ui-sortable widget instance// is still bound to the directive's elementif (!!getSortableWidgetInstance(element)) {element.sortable('refresh');}},0,false);});callbacks.start = function(e, ui) {if (opts['ui-floating'] === 'auto') {// since the drag has started, the element will be// absolutely positioned, so we check its siblingsvar siblings = ui.item.siblings();var sortableWidgetInstance = getSortableWidgetInstance(angular.element(e.target));sortableWidgetInstance.floating = isFloating(siblings);}// Save the starting position of dragged itemvar index = getItemIndex(ui.item);ui.item.sortable = {model: ngModel.$modelValue[index],index: index,source: element,sourceList: ui.item.parent(),sourceModel: ngModel.$modelValue,cancel: function() {ui.item.sortable._isCanceled = true;},isCanceled: function() {return ui.item.sortable._isCanceled;},isCustomHelperUsed: function() {return !!ui.item.sortable._isCustomHelperUsed;},_isCanceled: false,_isCustomHelperUsed: ui.item.sortable._isCustomHelperUsed,_destroy: function() {angular.forEach(ui.item.sortable, function(value, key) {ui.item.sortable[key] = undefined;});},_connectedSortables: [],_getElementContext: function(element) {return getElementContext(this._connectedSortables, element);}};};callbacks.activate = function(e, ui) {var isSourceContext = ui.item.sortable.source === element;var savedNodesOrigin = isSourceContext? ui.item.sortable.sourceList: element;var elementContext = {element: element,scope: scope,isSourceContext: isSourceContext,savedNodesOrigin: savedNodesOrigin};// save the directive's scope so that it is accessible from ui.item.sortableui.item.sortable._connectedSortables.push(elementContext);// We need to make a copy of the current element's contents so// we can restore it after sortable has messed it up.// This is inside activate (instead of start) in order to save// both lists when dragging between connected lists.savedNodes = savedNodesOrigin.contents();helper = ui.helper;// If this list has a placeholder (the connected lists won't),// don't inlcude it in saved nodes.var placeholder = getPlaceholderElement(element);if (placeholder && placeholder.length) {var excludes = getPlaceholderExcludesludes(element,placeholder);savedNodes = savedNodes.not(excludes);}};callbacks.update = function(e, ui) {// Save current drop position but only if this is not a second// update that happens when moving between lists because then// the value will be overwritten with the old valueif (!ui.item.sortable.received) {ui.item.sortable.dropindex = getItemIndex(ui.item);var droptarget = ui.item.parent().closest('[ui-sortable], [data-ui-sortable], [x-ui-sortable]');ui.item.sortable.droptarget = droptarget;ui.item.sortable.droptargetList = ui.item.parent();var droptargetContext = ui.item.sortable._getElementContext(droptarget);ui.item.sortable.droptargetModel =droptargetContext.scope.ngModel;// Cancel the sort (let ng-repeat do the sort for us)// Don't cancel if this is the received list because it has// already been canceled in the other list, and trying to cancel// here will mess up the DOM.element.sortable('cancel');}// Put the nodes back exactly the way they started (this is very// important because ng-repeat uses comment elements to delineate// the start and stop of repeat sections and sortable doesn't// respect their order (even if we cancel, the order of the// comments are still messed up).var sortingHelper =!ui.item.sortable.received &&getSortingHelper(element, ui, savedNodes);if (sortingHelper && sortingHelper.length) {// Restore all the savedNodes except from the sorting helper element.// That way it will be garbage collected.savedNodes = savedNodes.not(sortingHelper);}var elementContext = ui.item.sortable._getElementContext(element);savedNodes.appendTo(elementContext.savedNodesOrigin);// If this is the target connected list then// it's safe to clear the restored nodes since:// update is currently running and// stop is not called for the target list.if (ui.item.sortable.received) {savedNodes = null;}// If received is true (an item was dropped in from another list)// then we add the new item to this list otherwise wait until the// stop event where we will know if it was a sort or item was// moved here from another listif (ui.item.sortable.received && !ui.item.sortable.isCanceled()) {scope.$apply(function() {ngModel.$modelValue.splice(ui.item.sortable.dropindex,0,ui.item.sortable.moved);});scope.$emit('ui-sortable:moved', ui);}};callbacks.stop = function(e, ui) {// If the received flag hasn't be set on the item, this is a// normal sort, if dropindex is set, the item was moved, so move// the items in the list.var wasMoved ='dropindex' in ui.item.sortable &&!ui.item.sortable.isCanceled();if (wasMoved && !ui.item.sortable.received) {scope.$apply(function() {ngModel.$modelValue.splice(ui.item.sortable.dropindex,0,ngModel.$modelValue.splice(ui.item.sortable.index, 1)[0]);});scope.$emit('ui-sortable:moved', ui);} else if (!wasMoved &&!angular.equals(element.contents().toArray(),savedNodes.toArray())) {// if the item was not moved// and the DOM element order has changed,// then restore the elements// so that the ngRepeat's comment are correct.var sortingHelper = getSortingHelper(element, ui, savedNodes);if (sortingHelper && sortingHelper.length) {// Restore all the savedNodes except from the sorting helper element.// That way it will be garbage collected.savedNodes = savedNodes.not(sortingHelper);}var elementContext = ui.item.sortable._getElementContext(element);savedNodes.appendTo(elementContext.savedNodesOrigin);}// It's now safe to clear the savedNodes and helper// since stop is the last callback.savedNodes = null;helper = null;};callbacks.receive = function(e, ui) {// An item was dropped here from another list, set a flag on the// item.ui.item.sortable.received = true;};callbacks.remove = function(e, ui) {// Workaround for a problem observed in nested connected lists.// There should be an 'update' event before 'remove' when moving// elements. If the event did not fire, cancel sorting.if (!('dropindex' in ui.item.sortable)) {element.sortable('cancel');ui.item.sortable.cancel();}// Remove the item from this list's model and copy data into item,// so the next list can retrive itif (!ui.item.sortable.isCanceled()) {scope.$apply(function() {ui.item.sortable.moved = ngModel.$modelValue.splice(ui.item.sortable.index,1)[0];});}};// setup attribute handlersangular.forEach(callbacks, function(value, key) {callbacks[key] = combineCallbacks(callbacks[key], function() {var attrHandler = scope[key];var attrHandlerFn;if (typeof attrHandler === 'function' &&('uiSortable' +key.substring(0, 1).toUpperCase() +key.substring(1)).length &&typeof (attrHandlerFn = attrHandler()) === 'function') {attrHandlerFn.apply(this, arguments);}});});wrappers.helper = function(inner) {if (inner && typeof inner === 'function') {return function(e, item) {var oldItemSortable = item.sortable;var index = getItemIndex(item);item.sortable = {model: ngModel.$modelValue[index],index: index,source: element,sourceList: item.parent(),sourceModel: ngModel.$modelValue,_restore: function() {angular.forEach(item.sortable, function(value, key) {item.sortable[key] = undefined;});item.sortable = oldItemSortable;}};var innerResult = inner.apply(this, arguments);item.sortable._restore();item.sortable._isCustomHelperUsed = item !== innerResult;return innerResult;};}return inner;};scope.$watchCollection('uiSortable',function(newOpts, oldOpts) {// ensure that the jquery-ui-sortable widget instance// is still bound to the directive's elementvar sortableWidgetInstance = getSortableWidgetInstance(element);if (!!sortableWidgetInstance) {var optsDiff = patchUISortableOptions(newOpts,oldOpts,sortableWidgetInstance);if (optsDiff) {element.sortable('option', optsDiff);}}},true);patchUISortableOptions(opts);}function init() {if (ngModel) {wireUp();} else {$log.info('ui.sortable: ngModel not provided!', element);}// Create sortableelement.sortable(opts);}function initIfEnabled() {if (scope.uiSortable && scope.uiSortable.disabled) {return false;}init();// Stop WatcherinitIfEnabled.cancelWatcher();initIfEnabled.cancelWatcher = angular.noop;return true;}initIfEnabled.cancelWatcher = angular.noop;if (!initIfEnabled()) {initIfEnabled.cancelWatcher = scope.$watch('uiSortable.disabled',initIfEnabled);}}};}]);

转载于:https://www.cnblogs.com/DZzzz/p/10860191.html

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

AngularJs+Bootstrap Table $compile动态生成html
AngularJsBootstrap Table $compile动态生成html 关于angularbootstrap table 使用的一些问题 - ①table中动态添加元素并绑定事件，js事件（eg:’ng-click…’）未被监听 - ②使用jQuery方式绑定事件，造成数据动态绑定响应延时关…...
2024/4/20 19:22:03
dubbo 购物平台搭建笔记（二）后端项目搭建和运行、angularJs前端项目搭建 [伪继承]
第一部分：angularJs前端项目搭建前端搭建 angular.js angularjs的特征特征一：mvc模式 Model:数据,其实就是angular变量($scope.XX); View: 数据的呈现,HtmlDirective(指令); Controller:操作数据,就是function,数据的增删改查; 特征二：…...
2024/4/20 19:22:02
AngularJs：table中实现单元格展示多条可点击的数据（字符串split成array后，ng-repeat遍历）
js文件： 在js文件中，初始化声明表格的地方，在想要展示多条可点击数据的表头属性中，用一个自定义的属性做标记，标记本列需要做特殊的展示效果： $scope.tableConfig {fixedWidth: 280,scrollWidth: 1400,t…...
2024/4/20 19:22:01
切开双眼皮?尖华美
...
2024/4/21 5:31:36
瀑布流在Angularjs中的使用
在Angularjs向前台页面进行渲染时，处于循环中的div的内容不一样，从而导致div的高度不一致，导致样式错乱。因此需要在Angularjs中使用瀑布流。在网上进行了瀑布流代码的搜寻，最终选择了以下代码，这部分代码源自http://…...
2024/4/26 9:29:56
Angular7集成Ueditor完整版
1. 安装依赖 npm install ueditor --save2. 下载UEditor配置文件官方地址：http://ueditor.baidu.com/website/download.html 百度云盘： 边城孤客提取码：chpl 解压后目录为将配置的文件复制到资源目录下 3. 在共享模块里导入配置信息 …...
2024/4/21 5:31:33
哪开双眼皮好呀
...
2024/4/21 5:31:33
万州哪里割失败双眼皮图片
...
2024/4/23 15:33:04
微针双眼皮手术会失败吗
...
2024/4/21 5:31:31
全切双眼皮20天什么样
...
2024/4/21 5:31:30
诺德伊美尔武汉经验丰富的整双眼皮需要多少钱
...
2024/4/20 14:24:52
Angular：创建一个angular项目（一）
1、进入要创建项目的目录，在cmd命令框中输入：ng new 项目名称 ng new angulardemo012.查看文件夹 3.使用VS Code导入项目 4.在终端运行项目 ng serve --open5.运行成功 6.结束运行：ctrl c...
2024/4/21 5:31:27
Angular cli 搭建前端项目常用命令
1.创建项目 -- ng new my-app | ng new my-app --routing // my-app 为项目名称,， --routing 带路有项目2.带有路由的模块 -- ng generate module event --routing | ng g m event --routing // m为简写 event 为模块名3.添加服务service -- ng…...
2024/4/21 5:31:26
angular环境搭建、创建项目、运行项目
angular环境搭建、创建项目、运行项目环境搭建 1：准备工作安装最新版本的node.js，最好是安装node.js稳定版本 2：安装cnpm npm安装angular可能会失败，所以最好安装一个cnpm，后面步骤会用到。一般采用淘宝镜像安装cnp…...
2024/4/21 5:31:25
angular cli启动项目
使用cli1.7.3版本，cdk：5.0.0版本 cdk先放进package.json 然后再启用npm install，这样的不会报错的！ antd 0.7.0的版本放入项目中引入antd的 css，可以正常使用了...
2024/4/21 5:31:25
青岛诺德做双眼皮好吗
...
2024/4/21 5:31:23
轻松搭建angular2.0项目
要求：安装node6.9，npm3.0以上版本接下来两步完成项目的搭建 1、安装全局angular cli脚手架命令 npm install -g angular/cli 2、在想搭建项目的目录下，shift鼠标右击，（选择当前窗口打开命令行）&#…...
2024/4/21 5:31:22
莱西割诺德整形双眼皮好看还是单眼皮女生
...
2024/4/20 12:46:57
蚌埠那家双眼皮开的好
...
2024/4/21 5:31:21
双眼皮割
...
2024/4/20 19:22:09

sortable结合angularjs实现拖动排序

相关文章

最新文章