angular-ui-sortable实现拖拽功能

最新推荐文章于 2024-05-14 09:47:51 发布

岁月如歌！

最新推荐文章于 2024-05-14 09:47:51 发布

阅读量465

点赞数

分类专栏： AngularJS

本文链接：https://blog.csdn.net/lizhongyang21/article/details/103147529

版权

AngularJS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 引入文件

bower: bower install -S angular-ui-sortable
npm: npm install -S angular-ui-sortable
或直接下载；
注意：需要引入jquery-ui；
注意加载顺序：

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<script src="bower_components/angular-ui-sortable/sortable.min.js"></script>

2. 示例

<!DOCTYPE HTML>
<html>
    <head>
		<meta charset="utf-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
		<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"/>
		<title>标题</title>
		<style>
			.box{
				margin: 0 auto; margin-top:100px;width:300px;
			}
			.item{
				width:300px;height:50px;line-height: 50px;cursor: pointer;border:1px solid #ccc;
			}
		</style>
    </head>
    <body ng-app="test" ng-controller="appCtrl">
		<div class="box" ui-sortable="sortHandle" ng-model="data">
			<div class="item" ng-repeat="item in data track by $index">
				{{item.name}} 的 排序是 {{item.order}}
			</div>
		</div>
		
		<script src="bower_components/jquery/dist/jquery.min.js"></script>
		<script src="bower_components/angular/angular.min.js"></script>
		<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
		<script src="bower_components/angular-ui-sortable/sortable.min.js"></script>
		
		<script>
			angular.module('test',["ui.sortable"])
			.controller('appCtrl', appCtrl);

			function appCtrl($scope){
				$scope.data = [
					{id : 1, name : '张三', order: 1},
					{id : 2, name : '李四', order: 2},
					{id : 3, name : '王五', order: 3},
					{id : 4, name : '赵六', order: 4}
				];

				$scope.sortHandle = {
					'ui-floating': true,
					start: function(){
						console.log('start');
						console.log($scope.data);
					},
					update: function(e, ui){
						console.log('update');
						console.log($scope.data);
					},
					stop: function(e, ui){
						console.log('stop');
						console.log($scope.data);
					}
				}
			}
		</script>
    </body>
</html>

在这里插入图片描述

3. 不同数据列拖拽

如图：
在这里插入图片描述
实现这个功能只需加上option：connectWith: “.类名”

示例：

<!DOCTYPE HTML>
<html>
    <head>
		<meta charset="utf-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
		<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"/>
		<title>标题</title>
		<style>
			.box{
				margin: 0 auto; margin-top:100px;width:300px;
			}
			.box1{
				 margin:-200px 0 0 150px;width:300px;
			}
			.item{
				width:300px;height:50px;line-height: 50px;cursor: pointer;border:1px solid #ccc;
			}
		</style>
    </head>
    <body ng-app="test" ng-controller="appCtrl">
		<div class="box apps-container" ui-sortable="sortHandle" ng-model="data1">
			<div class="item" ng-repeat="item in data1 track by $index">
				{{item.name}} 的 排序是 {{item.order}}
			</div>
		</div>
		<div class="box1 apps-container" ui-sortable="sortHandle" ng-model="data2">
			<div class="item" ng-repeat="item in data2 track by $index">
				{{item.name}} 的 排序是 {{item.order}}
			</div>
		</div>
		
		<script src="bower_components/jquery/dist/jquery.min.js"></script>
		<script src="bower_components/angular/angular.min.js"></script>
		<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
		<script src="bower_components/angular-ui-sortable/sortable.min.js"></script>
		
		<script>
			angular.module('test',["ui.sortable"])
			.controller('appCtrl', appCtrl);

			function appCtrl($scope){
				$scope.data1 = [
					{id : 1, name : '张三', order: 1},
					{id : 2, name : '李四', order: 2},
					{id : 3, name : '王五', order: 3},
					{id : 4, name : '赵六', order: 4}
				];

				$scope.data2 = [
					{id : 1, name : '张三', order: 1},
					{id : 2, name : '李四', order: 2},
					{id : 3, name : '王五', order: 3},
					{id : 4, name : '赵六', order: 4}
				];

				$scope.sortHandle = {
					connectWith: ".apps-container",  //这是关键
					start: function(){
						console.log('start');
						console.log($scope.data1);
						console.log($scope.data2);
					},
					update: function(e, ui){
						console.log('update');
						console.log($scope.data1);
						console.log($scope.data2);
					},
					stop: function(e, ui){
						console.log('stop');
						console.log($scope.data1);
						console.log($scope.data2);
					}
				}
			}
		</script>
    </body>
</html>

查看文档

岁月如歌！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular-ui-sortable实现拖拽功能

1. 引入文件bower: bower install -S angular-ui-sortablenpm: npm install -S angular-ui-sortable或直接下载；注意：需要引入jquery-ui；注意加载顺序：<script src="bower_components/jquery/dist/jquery.min.js"></script&...
复制链接

扫一扫