结合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本身是具有原生拖放功能的,但是由于兼容 ...
随机推荐
- smartimageview 的原理
自定义的控件在布局文件中的引用都需要指定类的完整路径 1.自定义了一个MyImageview类继承了Imageview,添加三个构造方法 2.添加一个setImageUrl方法接受一个图片ur ...
- 推荐的php安全配置选项
推荐安全配置选项 这里有几个会影响安全功能的 PHP 配置设置.下面是一些显然应该用于生产服务器的: register_globals 设置为 offsafe_mode 设置为 offerror_re ...
- 总结下Mac环境下按照appium
第10天休息 先来总结下Mac环境下按照appium 一.相关网站 官网: http://appium.io/ 测试论坛 https://testerhome.com/wiki 二.环境准备 从官 ...
- springboot自动扫描添加的BeanDefinition源码解析
1. springboot启动过程中,首先会收集需要加载的bean的定义,作为BeanDefinition对象,添加到BeanFactory中去. 由于BeanFactory中只有getBean之类获 ...
- 震惊！！！！！！！靠sort水过二叉堆的天秀操作
- sqli-labs 1-22关
Page-1(Basic Challenges) Less 1-4 Less-(1-4)是最常规的SQL查询,分别采用单引号闭合.无引号.括号单引号闭合.括号双引号闭合,没有过滤:可以采用and '1 ...
- Solution -「AGC 036D」「AT 5147」Negative Cycle
\(\mathcal{Descriprtion}\) Link. 在一个含 \(n\) 个结点的有向图中,存在边 \(\lang i,i+1,0\rang\),它们不能被删除:还有边 \(\l ...
- Solution -「LOCAL」「cov. 牛客多校 2020 第五场 C」Easy
\(\mathcal{Description}\) Link.(完全一致) 给定 \(n,m,k\),对于两个长度为 \(k\) 的满足 \(\left(\sum_{i=0}^ka_i=n\r ...
- JUC之认识ConcurrentHashMap
ConcurrentHashMap为什么广泛使用?回答这个问题之前先要回忆下几个基本的概念涉及hash的几个数据结构及锁优化(关于锁优化参考JMM之Java中锁概念的分类总结 - 池塘里洗澡的鸭子 - ...
- 网页外部注入vConsole调试
概要 本篇介绍一种十分方便的方法为网站添加 vConsole 调试(通过篡改请求外部注入的方式,不需要您是网站的拥有者,主要用于调试线上站点). 之前已经发过一篇<借助FreeHttp为任意 ...