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+CSS实现精美的二级导航效果代码
Sep 17 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
js实现动态显示时间效果
Mar 06 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 Javascript
微信小程序实现拼图小游戏
Oct 22 Javascript
Web应用开发TypeScript使用详解
May 25 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 Javascript
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 多维数组排序(usort,uasort)
2010/06/30 PHP
PHP无限分类(树形类)的深入分析
2013/06/02 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
python实现排序算法
2014/02/14 Python
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
python实现多线程抓取知乎用户
2016/12/12 Python
python文件拆分与重组实例
2018/12/10 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
C语言开发工程师测试题
2016/12/20 面试题
数据库的约束含义
2012/09/09 面试题
设计毕业生简历中的自我评价
2013/10/01 职场文书
自我鉴定书范文
2013/10/02 职场文书
班组长工作职责
2013/12/25 职场文书
小学生环保标语
2014/06/13 职场文书
运动会演讲稿300字
2014/08/25 职场文书
中秋节慰问信
2015/02/15 职场文书
大学生党员自我评价
2015/03/04 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库