结合AngularJS实现拖拽
最近项目中要实现，左侧树向右侧树中元素的拖拽功能，开始在网上看了好多ng-drag等等操作，都没有实现预想的效果，偶然发现一篇博客，然后根据博客改编，实现了自己想要的效果。下面简单的分析一下实现过程。首先我先附上源码，如下：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>test</title>
7 <script src="angular.min.js"></script>
8 <style>
9 ul {
10 padding: 0;
11 margin: 0;
12 width: 300px;
13 }
14
15 .left {
16 float: left;
17 background-color: #ddd;
18 margin-left: 300px;
19 }
20
21 .right {
22 float: right;
23 background-color: #aaa;
24 margin-right: 300px;
25 }
26
27 li {
28 line-height: 30px;
29 }
30
31 .left li:hover {
32 background-color: orange;
33 cursor: move;
34 }
35
36 .right li:hover {
37 background-color: red;
38 cursor: move;
39 }
40 </style>
41 </head>
42
43 <body ng-app="myApp" ng-controller="MyCtrl">
44 <ul class="left">
45 <li ng-repeat="item in dogs" draggable="true" ruby-dragstart="dragstart(item)">{{ item.name }}</li>
46 </ul>
47 <ul class="right">
48 <li ng-repeat="item in cats" ruby-drop="drop(event,item)" ruby-dragover="dragover(event)">{{ item.name }}</li>
49 </ul>
50 <script>
51 var app = angular.module('myApp', []);
52 app.controller('MyCtrl', ['$scope', function($scope) {
53 $scope.dogs = [
54 { 'id': '1', 'name': '大狗' },
55 { 'id': '2', 'name': '二狗' },
56 { 'id': '3', 'name': '三狗' },
57 { 'id': '4', 'name': '四狗' }
58 ];
59 $scope.cats = [
60 { 'id': '11', 'name': '大猫' },
61 { 'id': '12', 'name': '二猫' },
62 { 'id': '13', 'name': '三猫' },
63 { 'id': '14', 'name': '四猫' }
64 ];
65 $scope.dragover = function(event) {
66 event.preventDefault();
67 }
68 $scope.dragstart = function(item) {
69 $scope.clientInfo = item;
70 }
71 $scope.drop = function(event, item) {
72 event.preventDefault();
73 console.log("dog:->", $scope.clientInfo);
74 console.log("cat:->", item);
75 }
76 }]);
77 var convertFirstUpperCase = function(str) {
78 return str.replace(/(\w)/, function(s) {
79 return s.toUpperCase();
80 });
81 };
82 rubyDragEventDirectives = {};
83 angular.forEach("dragstart drag dragenter dragover drop dragleave dragend".split(' '), function(eventName) {
84 var rubyEventName = 'ruby' + convertFirstUpperCase(eventName);
85 rubyDragEventDirectives[rubyEventName] = ['$parse', function($parse) {
86 //$parse 语句解析器
87 return {
88 restrict: 'A',
89 compile: function(ele, attr) {
90 var fn = $parse(attr[rubyEventName]);
91 return function rubyEventHandler(scope, ele) {
92 ele[0].addEventListener(eventName, function(event) {
93 if (eventName == 'dragover' || eventName == 'drop') {
94 event.preventDefault();
95 }
96 var callback = function() {
97 fn(scope, { event: event });
98 };
99 callback();
100 });
101 }
102 }
103 }
104 }]
105 });
106 app.directive(rubyDragEventDirectives);
107 </script>
108 </body>
109
110 </html>
为了简便，我把整个html,css以及js写在一个文件了，如果是真实项目中，最好将其分开。其实大家可以发现，html中仅仅只是加入了自定义指令
ruby-dragstart，开始拖动，可以检测到开始拖动的整个event及DOM元素；
ruby-dragover，当某被拖动的对象在另一对象容器范围内拖动时触发此事件.在该事件里填写： event.preventDefault() 。注：事件的默认行为是不允许被拖拽元素在其他元素上释放或放置（即无法触发 drop 事件），需要通过 event.preventDefault() 来阻止默认行为才能触发后续的 drop 事件）
ruby-drop，拖动的目标元素，当你拖动结束，会检测到是在哪个DOM元素上结束的拖拽事件；
draggable="true" ，是允许拖动，加上之后，拖动的时候会显示一个加号。
CSS这里就不再赘述了，大家想怎么玩就怎么玩，还要注意的一点就是自定义指令rubyDragEventDirectives,在自定义模块中，convertFirstUpperCase是为入参做一个合理接收，熟悉JS的朋友应该很快能够理解的。总结下来，这个实现也不是太难，对吧？我们一起去探索吧。。。
结合AngularJS实现拖拽的更多相关文章
- AngularJS之拖拽排序（ngDraggable.js）
ngDraggable.js是一款比较简单实用的angularJS拖拽插件,借助于封装好的一些自定义指令,能够快速的进行一些拖拽应用开发.首先先介绍一些基本的概念; ng-drop:是否允许放入拖拽元 ...
- Html5 拖拽行为和AngularJs的结合
一. Html5的拖拽行为 1.设置元素为可拖放:把draggable属性设置为true. example: <div id="drag1" draggable=" ...
- 结构-行为-样式 - Angularjs 环境下Ztree结合JqueryUI实现拖拽
新的项目中有一个需求是要求客户标签可以自定义,于是就想到了客户体验,让客户自己拖拽标签进行组合查询.但是理想很丰满,现实很骨感.一开始就遇到了问题,各个插件之间的结合问题,折腾一翻之后终于实现了这个功 ...
- angularjs结合html5的拖拽行为
闲聊: 小颖公司的项目之前要实现一个将左侧树中当前拖拽的内容,动态添加到右侧树种,虽然这个模块当时没有分给小颖,是同事完成的(小颖也不会嘻嘻),后来看了下他写代码,小颖自己写了个小demo.就当做个笔 ...
- angularjs 使用angular-sortable-view实现拖拽效果（包括拖动完成后的方法使用）
首先还是看效果图吧,方便大家可以快速得知是否是自己需要的功能:(抱歉电脑还未安装动图软件,先用.png) 如果上图是你需要的功能效果图,那么请往下看,我有写出来例子哦~ 使用这个插件有几个好处,首先: ...
- angular-dragon-drop.js 双向数据绑定拖拽的功能
在做公司后台物流的时候,涉及到34个省市分为两个部分,一部分为配送区域,另一部分为非配送区域,想利用拖拽的功能来实现,最好两部分的数组能自动更新. 刚好找到angular-dragon-drop.js ...
- angularjs1 自定义图片查看器(可旋转、放大、缩小、拖拽)
笔记: angularjs1 制作自定义图片查看器(可旋转.放大.缩小.拖拽) 2018-01-12 更新 可以在我的博客 查看我 已经封装好的 纯 js写的图片查看器插件 博客链接 懒得把 ...
- JavaScript动画-拖拽改变元素大小
▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...
- javascript动画系列第一篇——模拟拖拽
× 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容 ...
随机推荐
- Sublime Text 官方网站 http://www.sublimetext.com
Sublime Text 官方网站 http://www.sublimetext.com
- 微擎site.php函数以及路由连接
任务1: 微擎模块设计: module.php 规则类: 会调用module.php manifest.xml中业务菜单对应的模块 如果在site.php中没有相应的函数 比如 /web/index. ...
- postman中用当前时间戳做请求的入参
用postman做接口测试的,有些接口需要带上当前时间的时间戳作为请求的入参,postman支持这种功能吗? 答案是肯定的. 文中有使用时间戳的两种方法和postman常用的预定义变量. 例子中接口的 ...
- Solution -「多校联训」种蘑菇
\(\mathcal{Description}\) Link. 给定一棵含有 \(n\) 个结点的树,设 \(S\) 为其中的非空联通子集,求 \[\sum_{S}(\gcd_{u\in S} ...
- Spring Security配置个过滤器也这么卷
以前胖哥带大家用Spring Security过滤器实现了验证码认证,今天我们来改良一下验证码认证的配置方式,更符合Spring Security的设计风格,也更加内卷. CaptchaAuthent ...
- Spring Boot AOP 扫盲，实现接口访问的统一日志记录
AOP 是 Spring 体系中非常重要的两个概念之一(另外一个是 IoC),今天这篇文章就来带大家通过实战的方式,在编程猫 SpringBoot 项目中使用 AOP 技术为 controller 层 ...
- Jenkins项目迁移JOB
Jenkins项目迁移JOB:从旧的迁移到新的Jenkins上 北京介绍 今天由于迁移Jenkins服务器,需要完全拷贝Jenkins里的Job. 经实验,直接在服务器上移动Jobs目录下的文件即可. ...
- IO_FILE——leak 任意读
在堆题没有show函数时,我们可以用 IO_FILE 进行leak,本文就记录一下如何实现这一手法. 拿一个输出函数 puts 来说,它在源码里的表现形式为 _IO_puts . _IO_puts ( ...
- 使用Supervisord部署go应用
nohup nohup 是后台作业的意思, nohup运行的进程将会忽略终端信号运行.即后台运行一个命令.nohup COMMAND &用nohup运行命令可以使命令永久的执行下去,和用户终端 ...
- python数据结构：链表
链表与列表.数组这线性结构不同之处在于其在首末两端增删的话比较方便 单链表: 但是链表查找和删除的话都是需要从第一个开始从头查找 因此查找和删除的复杂度都为O(n) 双链表: 相比单链表来说,每个节点 ...