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 相关文章推荐
JavaScript中的细节分析
Jun 30 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
axios基本入门用法教程
Mar 25 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
基于vue中的scoped坑点解说
Sep 04 Javascript
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
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
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
jquery自定义插件开发之window的实现过程
2016/05/06 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
Python实现两个list对应元素相减操作示例
2017/06/09 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
法国家具及室内配件店:home24
2017/01/21 全球购物
COS美国官网:知名服装品牌
2019/04/08 全球购物
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
英文版网络工程师求职信
2013/10/28 职场文书
总经理秘书工作职责
2013/12/26 职场文书
服装设计师职业生涯规划范文
2014/02/28 职场文书
软件售后服务承诺书
2014/05/21 职场文书
集体生日活动方案
2014/08/18 职场文书
六年级小学生评语
2014/12/26 职场文书
党员转正申请报告
2015/05/15 职场文书
保姆聘用合同
2015/09/21 职场文书
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL