angular-ui-sortable实现可拖拽排序列表
项目需求，添加列表可拖拽排序功能，谷歌了一下，找到一个Angular的插件：angular-ui-sortable，项目地址：https://github.com/angular-ui/ui-sortable
需要在之前引入jquery，和jquery-ui，否则无法使用。
我们要做的事情，加载数据，拖拽排序并输出当前顺序：
js代码：
<script src="../../jquery.js"></script> <script src="../../jquery-ui.js"></script> <script src="../../angular.js"></script> <script src="ui-sortable/src/sortable.js"></script> <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 } } }) </script>
html代码：
<body>
<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>
效果：
我又另外添加了数据排序功能，不能直接使用orderBy筛选器，这样每次移动都会重新排序，需要使用orderByFilter和$watchCollection来实现效果，具体可查看地址：https://github.com/justforuse/Pro_Angular-demo/tree/master/draggable-list
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍vue实现列表拖拽排序的功能，包括了vue实现列表拖拽排序的功能的使用技巧和注意事项，需要的朋友参考一下 在日常开发中，特别是管理端，经常会遇到要实现拖拽排序的效果；这里提供一种简单的实现方案。 此例子基于vuecli3 首先，我们先了解一下js原生拖动事件: 在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正
-
使用鼠标调整列表中或者网格中元素的排序。 如需了解更多有关 sortable 交互的细节，请查看 API 文档 可排序小部件（Sortable Widget）。 默认功能 在任意的 DOM 元素上启用 sortable 功能。通过鼠标点击并拖拽元素到列表中的一个新的位置，其它条目会自动调整。默认情况下，sortable 各个条目共享 draggable 属性。 <!doctype html> <
-
可排序列表是列表的扩展，可以对列表进行排序. 让我们来看一下可排序列表元素的布局结构： <!-- 加在列表区上额外的“sortable”类 --> <div class="list-block sortable"> <li> <div class="item-content"> <div class="item-media">...</div> <div class
-
本文向大家介绍vuedraggable+element ui实现页面控件拖拽排序效果，包括了vuedraggable+element ui实现页面控件拖拽排序效果的使用技巧和注意事项，需要的朋友参考一下 项目要实现一些控件的拖拽排序。从而找到了这款vuedraggable控件，供大家参考，具体内容如下 如上图要实现这些控件的拖拽排序 这是拖拽后 由于公司网络的原因，项目没有使用npm，都是使用的引
-
本文向大家介绍vue.draggable实现表格拖拽排序效果，包括了vue.draggable实现表格拖拽排序效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了vue.draggable实现表格拖拽排序效果展示的具体代码，供大家参考，具体内容如下 主要使用vuedraggable和sortablejs两个组件。 1、安装组件 2、引入组件 3、HTML 我的例子是给表格排序，项目整
-
jQueryUI提供了sortable()方法，可以使用鼠标对列表或网格中的元素进行重新排序。 此方法基于作为第一个参数传递的操作字符串执行可排序性操作。 语法 (Syntax) sortable ()方法可以使用两种形式 - $（selector，context）.sortable（options）方法 $(selector, context).sortable ("action", [para
-
本文向大家介绍php接口实现拖拽排序功能，包括了php接口实现拖拽排序功能的使用技巧和注意事项，需要的朋友参考一下 列表拖拽排序是一个很常见的功能，但是后端接口如何处理却是一个令人纠结的问题 如何实现才能达到效率最高呢? 先分析一个场景，假如有一个页面有十条数据，所谓的拖拽就是在这十条数据来来回回的拖，但是每次拖动都会影响到其他数据例如把最后一条拖到最前面，那么后面九条就自动往后移，反之也是，嗯~
-
本文向大家介绍javascript实现表格排序 编辑 拖拽 缩放，包括了javascript实现表格排序 编辑 拖拽 缩放的使用技巧和注意事项，需要的朋友参考一下 简单表格排序 可以双击编辑 自定义编辑后的 规则 可拖动列进行列替换 可推动边框进行列宽度的缩放 已知BUG： ie6下 中文不自动换行 非ie下字母和数字也不自动换行确实让人恼火 chrome浏览器下点击运行好像问题