结合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本身是具有原生拖放功能的,但是由于兼容 ...
随机推荐
- idea的jar文件，“java.lang.SecurityException: Invalid signature file digest for Manifest main attribute
感谢大佬:https://blog.csdn.net/mingyuli/article/details/84674483 命令行运行jar出现问题: 1.找不到主类.打开jar文件包,在MANIFES ...
- GFS 分布式文件系统
GFS 分布式文件系统 1.GlusterFS概述 : GlusterFS简介 a) GlusterFS是一-个开源的分布式文件系统. 由存储服务器.客户端以及NFS/Samba存储网关(可选,根据 ...
- A*算法及其matlab实现
教程 基本理论教程 A*算法程序 最简单的A*算法
- LeetCode随缘刷题之盛最多水的容器
package leetcode.day_01_30; /** * 给你 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点(i,ai) .在坐标内画 n 条垂直线,垂直线 i的两个端 ...
- Selenium对应版本
下面是谷歌浏览器与chromedriver的版本对应关系,供参考: ChromeDriver v2.45 (2018-12-10)----------Supports Chrome v70-72Chr ...
- CoaXPress 接口相机的控制方法--1
GenICam 介绍 简而言之,GenICam 定义了一个通用的相机接口,使得应用程序的编写.相机的控制可以与具体的型号解耦,这样就可以设计出通用的软件完成对不同相机的控制.我们实际使用的CoaXPr ...
- Vue2.0源码学习(1) - 数据和模板的渲染（上）
准备 一.首先去GitHub上把vue源码download下来,传送门:https://github.com/vuejs/vue 二.搭建一个vue-cli跑起来,用于代码调试,不看着代码动起来只看源 ...
- TCP/IP详解 读书笔记（一）：概述
分层 网络协议通常分不同层次进行开发,每一层负责不同的职责,一个协议簇指的是一组不同层次上的多个协议的组合. TCP/IP通常被认为是一个四层协议系统: 链路层:主要是处理与电缆或其他传输媒介的物理接 ...
- 二、MyBatis基础配置应用实例
核心配置文件sqlMapConfig.xml Mybatis核心配置文件层级关系 1)environments标签 2)mapper标签 eg: 3)properties标签 数据源配置参数抽取至jd ...
- Springboot整合kaptcha验证码
01.通过配置类来配置kaptcha 01-01.添加kaptcha的依赖: <!-- kaptcha验证码 --> <dependency> <groupId>c ...