基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能


Posted in Javascript onApril 02, 2019

ngDraggable.js是一款比较简单实用的angularJS拖拽插件,借助于封装好的一些自定义指令,能够快速的进行一些拖拽应用开发。首先先介绍一些基本的概念;

•ng-drop:是否允许放入拖拽元素

•ng-drop-success($data, $event):拖拽元素放入的回调;$data:放入元素数据;$event拖拽事件对象

•ng-drag:元素是否允许拖拽

•ng-drag-success($data, $event):$data:拖拽元素数据,$event拖拽元素事件对象

•ng-drag-data:拖拽数据

官方链接:https://github.com/fatlinesofcode/ngDraggable

在拖拽进行元素排序时,只需动态更改下循环数组元素顺序;具体事件绑定drop绑定在父元素,drag绑定在子元素即可,具体实现代码如下:

效果图如下:

<!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">
  <style>
    .drag-container {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .drag-container .drag-box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 200px;
      height: 200px;
      margin: 20px;
      color: #fff;
      font-size: 20px;
      font-weight: bold;
    }
    .drag-container .drag-box .drag-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 150px;
      height: 150px;
    }
  </style>
  <title>ng-dragger</title>
</head>
<body ng-app="app" ng-controller="draggerController">
  <div class="drag-container">
    <div ng-repeat="item in dragArr" class="drag-box" ng-drop="true" ng-drop-success="onDropComplete($index, $data, $event)">
      <div class="drag-item" ng-drag="true" ng-drag-data="{{item}}" ng-style="{background: item.color}">{{item.text}}</div>
    </div>
  </div>
  <script src="https://cdn.bootcss.com/angular.js/1.3.1/angular.js"></script>
  <script src="https://cdn.bootcss.com/ngDraggable/0.1.11/ngDraggable.js"></script>
  <script>
    var myApp = angular.module('app', ['ngDraggable']);
    myApp.controller('draggerController', function($scope) {
      $scope.dragArr = [{
        text: '方块1',
        color: 'green',
        key: 'arr1'
      }, {
        text: '方块2',
        color: 'blue',
        key: 'arr1'
      }, {
        text: '方块3',
        color: '#888',
        key: 'arr1'
      }, {
        text: '方块4',
        color: '#888',
        key: 'arr2'
      }, {
        text: '方块5',
        color: '#888',
        key: 'arr2'
      }, {
        text: '方块6',
        color: '#888',
        key: 'arr2'
      }];
      $scope.onDropComplete = function(index, obj, $event) {
        var otherObj = $scope.dragArr[index];
        var otherIndex = $scope.dragArr.findIndex(vv => Object.is(vv.text, obj.text));
        if (otherObj.key !== obj.key) return;
        $scope.dragArr[index] = obj;
        $scope.dragArr[otherIndex] = otherObj;
      }
    })
  </script>
</body>
</html>

基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能

总结

以上所述是小编给大家介绍的基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
常用简易JavaScript函数
Apr 09 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
JS实现轮播图效果
Jan 11 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 Javascript
详解vue后台系统登录态管理
Apr 02 #Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 #Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
Apr 02 #Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 #Javascript
基于Vue插入视频的2种方法小结
Apr 02 #Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 #Javascript
小程序实现自定义导航栏适配完美版
Apr 02 #Javascript
You might like
php操作redis数据库常见方法实例总结
2020/02/20 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
javascript中的对象创建 实例附注释
2011/02/08 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
python实现马耳可夫链算法实例分析
2015/05/20 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
厨房领班竞聘演讲稿
2014/04/23 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
群众路线个人整改方案
2014/10/25 职场文书
委托培训协议书
2014/11/17 职场文书
会计岗位职责范本
2015/04/02 职场文书
雷锋的故事观后感
2015/06/10 职场文书
信息技术课教学反思
2016/02/23 职场文书
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS