闲聊:
小颖公司的项目之前要实现一个将左侧树中当前拖拽的内容, 动态添加到右侧树种, 虽然这个模块当时没有分给小颖, 是同事完成的 (小颖也不会嘻嘻), 后来看了下他写代码, 小颖自己写了个小 demo. 就当做个笔记啦嘻嘻.
先来 看看具体效果:
实现方法:
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>
希望可以对大家有所帮助哦. 好久都没写博客啦, 嘻嘻最近变懒了, 而且特别懒, 哈哈哈哈, 天热啦, 大家多喝水哦, 注意防暑.
来源: https://www.cnblogs.com/yingzi1028/p/9221181.html