结合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本身是具有原生拖放功能的,但是由于兼容 ...
随机推荐
- 【Android珍藏】推荐10个炫酷的开源库【转】
感谢大佬:https://www.jianshu.com/p/d608f0228fd4 前言 技术群里面经常有人问到一些炫酷的UI效果实现方法,有时候我都是给一个相同或者相似效果的Github链接,有 ...
- IDEA：修改JAVA文件自动引入import.*包
感谢大佬:https://blog.csdn.net/fly910905/article/details/90208744 问题描述 Intellij Idea工具在java文件中,经常会自动导入im ...
- Loadrunner 11 中的Java Vuser
Java vuser是自定义的java虚拟用户脚本,脚本中可以使用标准的java语言. 1.安装jdk 注意,lr11最高支持jdk1.6 2.配置环境变量 3.在lr中选择java vuser协议 ...
- Java线程状态介绍
原创:转载需注明原创地址 https://www.cnblogs.com/fanerwei222/p/11867086.html Java 线程状态介绍: Java官方文档中对Java线程的几种状态做 ...
- 一张图让你看懂 iPhone 各种分辨率问题！ #DF
话不多说,直接看图! Source: paintcodeapp.com
- linux+nginx+tomcat负载均衡,实现session同步
第一部分:nginx反向代理tomcat 一.软件及环境 软件 系统 角色 用途 安装的软件 ip地址 Centos6.5x86_64 nginx 反向代理用户请求 nginx 172.16.249. ...
- linux内核可以接受的参数 | Linux kernel启动参数 | 通过grub给内核传递参数
在Linux中,给kernel传递参数以控制其行为总共有三种方法: 1.build kernel之时的各个configuration选项. 2.当kernel启动之时,可以参数在kernel被GRUB ...
- GCC 使用库文件名进行链接
使用 GCC 进行 C/C++ 代码编译时,如果代码中使用到了库函数,需要使用 -l 选项指定该库函数所在的库.如:-lm.-lrt.-lpthread等.这种方式使用的是库的缩写.一个库的文件名如果 ...
- mysql 事务 隔离性 锁
1.四大特性 1.1 原子性(Atomicity) 一个事务是不可分割的最小工作单位.一个事务是不可分割的最小工作单位. 利用undo log保证原子性,undo log记录的是操作的反向语句,例如执 ...
- Python中特殊函数__str__()
在类中定义了__str__(self)方法,那么当使用print打印实例对象的时候,就会直接打印出在这个方法中return的数据. 案列: 1 class Book: 2 3 def __init__ ...