基于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实现的支持lrc歌词的播放器
May 17 Javascript
js 单引号 传递方法
Jun 22 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
layui导航栏实现代码
May 19 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 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.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
javascript处理table表格的代码
2010/12/06 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
Python赋值语句后逗号的作用分析
2015/06/08 Python
Python程序中的观察者模式结构编写示例
2016/05/27 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
HTML5未来发展趋势
2016/02/01 HTML / CSS
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
汽车运用工程毕业生自荐信
2013/10/29 职场文书
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
高中的职业生涯规划书
2013/12/28 职场文书
会计学专业求职信
2014/07/17 职场文书
语文复习计划
2015/01/19 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
公积金具结保证书
2015/05/11 职场文书
河童之夏观后感
2015/06/11 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
MySQL读取JSON转换的方式
2022/03/18 MySQL