angularjs结合html5实现拖拽功能


Posted in Javascript onJune 25, 2018

先来 看看具体效果:

angularjs结合html5实现拖拽功能

实现方法:

1.下载并引入 angularjs

2.HTML代码:

<!DOCTYPE html>
<html lang="en" ng-app="test">
<head>
  <meta charset="UTF-8">
  <title>Html5 拖拽行为和AngularJs的结合</title>
  <meta charset="utf-8"/>
  <script type="text/javascript" src="js/angular.js"></script>
  <style>
    .to-drag, .drag-stop {
      display: inline-block;
    }
  </style>
</head>
<body ng-controller="main">
<div class="to-drag">
  <ul>
    <li ng-repeat="item in list.data" ng-include="'./lefttree.html'"></li>
  </ul>
</div>
<div class="drag-stop">
  <ul>
    <li ng-repeat="item in rightList.data" ng-include="'./righttree.html'"></li>
  </ul>
</div>
</body>
</html>

3.js

<script type="text/javascript">
  let mod = angular.module("test", []);
  mod.controller("main", ['$scope', function ($scope) {
    $scope.list = {
      data: [{
        id: 1,
        name: '22',
        child: [{
          id: '1-1',
          name: '1-1_name-左'
        }, {
          id: '1-2',
          name: '1-2_name-左'
        }]
      }],
      dragstart: function (item) {
        $scope.clientInfo = item;
      }
    }
    $scope.rightList = {
      data: [{
        id: 1,
        name: '停止拖动',
        child: [{
          id: '1-1',
          name: '1-1_name-右'
        }, {
          id: '1-2',
          name: '1-2_name-右'
        }]
      }],
      drop: function (event, item) {
        event.preventDefault();
        console.log("被拖动的元素:->", $scope.clientInfo);
        console.log("当前节点:->", item);
        //调用后端添加接口,实现真实的添加。
      },
      dragover: function (event) {
        event.preventDefault();
      }
    }
  }]);
  var convertFirstUpperCase = function (str) {
    return str.replace(/(\w)/, function (s) {
      return s.toUpperCase();
    });
  };
  rubyDragEventDirectives = {};
  angular.forEach("dragstart drag dragenter dragover drop dragleave dragend".split(' '), function (eventName) {
    var rubyEventName = 'ruby' + convertFirstUpperCase(eventName);
    rubyDragEventDirectives[rubyEventName] = ['$parse', function ($parse) {
      //$parse 语句解析器
      return {
        restrict: 'A',
        compile: function (ele, attr) {
          var fn = $parse(attr[rubyEventName]);
          return function rubyEventHandler(scope, ele) {
            ele[0].addEventListener(eventName, function (event) {
              if (eventName == 'dragover' || eventName == 'drop') {
                event.preventDefault();
              }
              var callback = function () {
                fn(scope, {event: event});
              };
              callback();
            });
          }
        }
      }
    }]
  });
  mod.directive(rubyDragEventDirectives);
</script>

希望可以对大家有所帮助哦。好久都没写博客啦,嘻嘻最近变懒了,而且特别懒,哈哈哈哈,天热啦,大家多喝水哦,注意防暑。

Javascript 相关文章推荐
js下弹出窗口的变通
Apr 18 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
May 17 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
深入理解vue Render函数
Jul 19 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
vue中vee validate表单校验的几种基本使用
Jun 25 #Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 #Javascript
JS的函数调用栈stack size的计算方法
Jun 24 #Javascript
JavaScript中var、let、const区别浅析
Jun 24 #Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 #Javascript
Vue中$refs的用法详解
Jun 24 #Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 #Javascript
You might like
咖啡与牛奶
2021/03/03 冲泡冲煮
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
js replace正则表达式应用案例讲解
2013/01/17 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
react-redux中connect()方法详细解析
2017/05/27 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
联想中国官方商城:Lenovo China
2017/10/18 全球购物
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
What is view? why do we have view?
2012/06/22 面试题
Java编程面试题
2016/04/04 面试题
啤酒销售实习自我鉴定
2013/09/24 职场文书
高中生学习总结的自我评价范文
2013/10/13 职场文书
网上签名寄语活动留言
2014/01/18 职场文书
九年级物理教学反思
2014/01/29 职场文书
超市开店计划书
2014/04/26 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
酒会邀请函
2015/01/31 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
社区低保工作总结2015
2015/07/23 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python