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 序列化对象实现代码
Dec 18 Javascript
分享20款好玩的jQuery游戏
Apr 17 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
Vue 的 v-model用法实例
Nov 23 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 学习提高路线分享
2011/10/23 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
php获取当前时间的毫秒数的方法
2014/01/26 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
php内存缓存实现方法
2015/01/24 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
jquery map方法使用示例
2014/04/23 Javascript
sails框架的学习指南
2014/12/22 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
2015/12/25 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
tornado 多进程模式解析
2018/01/15 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
python 实现UTC时间加减的方法
2018/12/31 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
python 如何对logging日志封装
2020/12/02 Python
财务管理专业应届毕业生求职信
2013/09/22 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
初中军训感想
2015/08/07 职场文书