2. 程式人生 > >使用angular-ui-sortable實現可拖拽排序列表

使用angular-ui-sortable實現可拖拽排序列表

阿新 • • 發佈：2018-12-21
                     

專案需求，新增列表可拖拽排序功能，谷歌了一下，找到一個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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

效果：

這裡寫圖片描述

           

相關推薦

使用angular-ui-sortable實現可拖拽排序列表

                     專案需求，新增列表可拖拽排序功能，谷歌了一下，找到一個Angular的外掛：angular-ui-sortable，專案地址：https://github.com/angular-ui/ui-sortable需要在之前引入jquery，和jquery-ui，否則無法使

AngularJs可拖拽排序列表

       angular-sortable-view 是一款很好用的angularJs可拖拽列表排序外掛，使用也非常簡單，其內部封裝了幾個指令，直接注入模組，呼叫指令即可實現功能。 使用說明：

Javascript寫的一個可拖拽排序的列表

自己 pos 清除 children align 定義 width nbsp console 自己常試寫了一個可拖拽進行自定義排序的列表，可能寫的不太好，歡迎提供意見。 我的思路是將列表中的所有項都放進一個包裹層，將該包裹層設為相對定位，每當點擊一個項時，將該項脫離文檔並

實現可拖拽移動的懸浮按鈕

前言： 　　最近想要實現一個可拖拽移動的FAB按鈕，這裡記錄一下個人的思路與經驗。 如何監聽FAB按鈕的移動？ 　　我們可以實現View.OnTouchListener介面，在onTouch( )方法中獲取FAB按鈕移動時的位置引數。或者可以選擇複寫View自身的onT

Android實現可拖拽的懸浮框

前言：   最近遇到一個開發需求，機器人在使用ASR(語音識別)時，需要將使用者說的話，在機器人胸前的互動螢幕上展示出來，也就是展示出相應的字幕。關鍵有一個要求就是可將字幕進行拖拽。。。(怎麼樣，這個需求夠變態吧，雖從正常互動的角度認為這樣完全沒必要，並簡單交涉了下，結果很無奈，你懂得。

基於Vue實現可以拖拽排序的樹形表格

專案需要一個可以拖拽排序的樹形表格，github上搜了一下，併為找到，大部分都不支援拖拽，所以自己實現了一個簡單的元件，已開源 原始碼在這裡，併發布到npm上，如果有類似需求可以試一下，chrome上沒有任何問題 效果圖如下： drag-tree-table 使用方式

Recyclerview實現網格拖拽排序

門禁列表排序 需求效果是：前兩行是常用門禁，黃色顯示，之後是普通門，白色顯示。按住一個門時，除了被按住的門，其他門抖動，被按住門加陰影。常用門和普通門交換位置時，開啟漸變動畫。 演示：

js實現可拖拽的div

可拖動DIV層的實現方法 http://blog.csdn.net/twoByte/article/details/73269653 http://www.cnblogs.com/zhuzhenwei918/p/6569295.html 實現一個div可以被拖拽，程

實現可拖動排序的ListView-DragListView

專案 中要用到拖動排序的效果，於是百度到網上的做法，github上開源框架被我pass, 為了一個小功能匯入一庫太不划算。然後看到這篇 http://blog.csdn.net/jj120522/article/details/8240407，可能是博主原始

自定義控制元件——可拖拽排序的ListView

前言 最經研究了一下拖拽排序的ListView，跟酷狗裡的播放列表排序一樣，但因為要新增自己特有的功能，所以研究了好長時間。一開始接觸的是GitHub的開源專案——DragSortListView，實現的效果和流暢度都很棒。想根據他的程式碼自己寫一個，但程式碼

63.實現一個拖拽排序

ddc 圖片 html list before children 實現 vue.js script //為了方便借助vue和jquery <!DOCTYPE html> <html lang="en"> <head>

jQuery UI sortable()實現拖動排序

Query UI的強大不用多說，今天來看下它的拖動排序功能，jQuery UI使用sortable()實現對元素拖動排序，首先來看下面這個簡單的例子： <!DOCTYPE html> <html> <head> <title>

Sortable拖拽排序插件數據篩選

mark var body pos post push _id java ble 後臺有拖拽排序功能，然而前段在開發的時候，一整頁的數據都發給後端了。 於是查看前端代碼，想到了如下解決辦法，即先把排序前的保存，然後對比排序後的，有差異的才發回給後端。 var new_ids

element-ui dialog組件添加可拖拽位置 可拖拽寬高

瀏覽器 client pos eight rep sem per 由於 let 有幾個點需要註意一下 每個彈窗都要有唯一dom可操作 指令可以做到 拖拽時要添加可拖拽區塊 header 由於element-ui dialog組件在設計時寬度用了百分比, 這裏不同瀏

jQuery實現div橫向拖拽排序

src AR img blog set 排序 局部變量 -a 圖片 參考:https://blog.csdn.net/kongjiea/article/details/45578033 效果圖: html <h1>div橫向拖拽排序</h1>

C# winfrom 如何實現子窗體在主界面裏可伸縮可拖拽

看電影 味道 沒有 貴賓 電影 悲傷 都是 窗體 先生 愛情的滋味是澀的，比最青的果還要澀；愛情的滋味是甜的，比最濃的蜜還要甜；愛情的滋味是酸的，比最嫩的葡萄還要酸；愛情的滋味是苦的，比最老的黃蓮還要苦。在愛情裏，什麽滋味都有，愛，恨，快樂，痛苦，欣悅，悲傷，種種味道，沒一

基於html5拖拽api實現列表的拖拽排序

ins urn attribute ret plain drag top round nodes 基於html5拖拽api實現列表的拖拽排序 html代碼： <ul ondrop="drop_handler(event);" ondragover="drago

小程序開發如何實現視頻或音頻自定義可拖拽進度條

text 完成 我們 控制 轉載 產品 結構 可拖拽 step 程序原生組件的音頻播放時並沒有進度條的顯示，而此次在我們所接的項目中，鑒於原生的視頻進度條樣式太醜，產品要求做一個可拖拽的進度條滿足需求。視頻和音頻提供的api大致是相似的，可以根據以下代碼修改為與音頻相關的進

sortable 可拖拽元件

<!doctype html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=9,Chrome=1" /> <meta http-equiv="X-UA-Comp

vue拖拽克隆元件 vue.draggable API options實現盒子之間相互拖拽排序克隆clone

vue拖拽克隆clone元件API， vue.draggable實現盒子之間相互拖拽排序克隆（網上資源整理的文件） 效果圖：   首先需要安裝vuedraggable依賴包： npm install vuedraggable --save 複製vue html程式碼到專案：