结合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本身是具有原生拖放功能的,但是由于兼容 ...
随机推荐
- web常用开发工具
1.WebStorm[推荐] WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.目前已经被广大中国JS开发者誉为"Web前端开发神器"." ...
- 位运算符、|和||、&和&&的区别
一.位运算符操作的都是整数类型 1.<<:左移,在一定范围内向左移动n位,相当于乘以2的n次幂 左移不管是正数还是负数,都是在后面添0: 2.>>:右移,在一定范围内向右移动n ...
- List接口中特有方法
import java.util.ArrayList; import java.util.List; /* List接口中特有方法: 添加 add(int index, E element) addA ...
- Failed to connect to raw.githubusercontent.com 443 解决方案
wget 'https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid ...
- 微服务与SpiringBoot
微服务: 微服务是一种架构风格,一般说到微服务都会说"微服务架构",即一个系统的各个功能(如结账,用户等)独立出来,以及各个服务独立出来,每个模块是可独立替换.可独立升级的软件单元 ...
- 帆软报表（finereport）JS实现cpt中详细单元格刷新
1.刷新固定单元格 setInterval(function(){ //获取第二行第 5 列 E2 单元格对象 var _changeCell = $("tr[tridx=1]" ...
- Solution -「CF 923F」Public Service
\(\mathscr{Description}\) Link. 给定两棵含 \(n\) 个结点的树 \(T_1=(V_1,E_1),T_2=(V_2,E_2)\),求一个双射 \(\varph ...
- Python基础—内置函数（Day14）
一.内置函数 1.***eval:执行字符串类型的代码,并返回最终结果(去掉括号里面是什么就返回什么). print(eval('3+4')) #7 ret = eval('{"name&q ...
- Windows系统散列值获取分析与防范
LM Hash && NTLM Hash Windows操作系统通常使用两种方法对用户的明文进行加密处理,在域环境中,用户信息存储在ntds.dit中,加密后为散列值.Windows操 ...
- Ubuntu安装g++命令
Ubuntu安装g++ sudo apt-get install make gcc g++ 再装上函数手册 sudo apt-get install manpages-dev 或者采用 sudo ap ...