拖拽有多种写法，在这里就看一看angular版的拖拽。

<!DOCTYPE html>

<html ng-app="myApp">

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			#box{

				width: 100px;

				height: 100px;

				background: black;

				/*一定要给当前元素设置绝对定位*/

				position: absolute;

				left: 0;

				top: 0;

			}

		</style>

	</head>

	<body>

		<div id="box" my-drag></div>

	</body>

		<script src="jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>

		<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">

//			自定义一个模块

			var app = angular.module("myApp",[]);

//			自定义指令  自定义指令时一定要使用驼峰命名法

			app.directive('myDrag',function(){

//				返回一个函数

				return{

					link : function(scope,element,attr){

//						scope可以接收到的数据

// 						element 当前的元素

//						attr属性

//						拖拽的三大事件mousedown,mousemove,mouseup.使用jq绑定事件的方法进行绑定

						element.on('mousedown',function(ev){

//							通过event获取到当前对象

							var This = $(this);

//							获取到鼠标离当前元素上边框的距离

							var disX = ev.clientX - $(this).offset().left;

//							获取到元素距离左边框的距离

//							因为在拖拽的过程中不变的是鼠标距离元素边框的距离  通过不变和已知求变量

							var disY = ev.clientY - $(this).offset().top;

							$(document).on('mousemove',function(ev){

//								将所改变的值通过样式设置给当前元素

								This.css({

									left:ev.clientX - disX,

									top:ev.clientY - disY,

								});

							});

							$(document).on('mouseup',function(){

//								鼠标松开时关闭所有事件

								$(document).off();

							})

						})

					},

					restrict:'A', //ECMA    	E元素  C类名 M注释 A属性

				};

			});

		</script>

</html>

　　

使用angular帮你实现拖拽的更多相关文章

  1. Angular 2.0 文本拖拽

    基于Angular7.1和TypeScript实现 Html代码 <div style="padding-left: 0px;"> <div id='conten ...

  2. angular ng-repeat+sortable 拖拽demo

    由于项目需求,需要使用angular 实现列表的增.删.改,并且列表支持拖拽. 看了下angular-ui 里面的sortable组件,使用起来也是非常简单,几十行代码就完成了所需功能. 我现在懒得想 ...

  3. Angular 自定义拖拽指令

    指令 组件是一种带模版的指令.指令是超级. 结构型指令(改变布局)和属性型指令(改变外观和行为). Renderer2和ElementRef Angular不提倡直接操作DOM 对于DOM的操作应该通 ...

  4. angular实现draggable拖拽

    前言:最近项目要实现一个拖拽功能,我在网上开始了各类搜寻,虽然后面因为数据原因舍弃了拖拽的这一需求,但是为了不辜负最近的研究,还是来记录一下. 场景需求:面试预约选时间节点,候选人之间是可以相互交换的 ...

  5. Angular 元素拖拽

    拖动元素到指定区域 拖放的同时传递数据 1. 安装 ng2-drag-drop npm install ng2-drag-drop --save 2. 模板中配置可拖拽元素 // drag.compo ...

  6. Android 自动化测试—robotium(八) 拖拽

    本文来源于:http://xiaomaozi.blog.51cto.com/925779/933056 SeekBar控件 代码实现:http://luwenjie.blog.51cto.com/92 ...

  7. Qt之QAbstractItemView视图项拖拽(一)

    一.需求说明 最近在搞视图项的拖拽,也上网查了一些资料,好多的文档都是一样的,只是被不通的网站所收录了(也有可能是被爬过去的,不明所以),不过也有一些文档写的不错,不过就是太简易,都是点睛之笔,总之功 ...

  8. duilib中控件拖拽功能的实现方法（附源码）

    转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41144283 duilib库中原本没有显示的对控件增加拖拽的功能,而实际 ...

  9. Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理

    我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...

随机推荐

  1. SDUT OJ 迷之好奇 （字典树 )

    迷之好奇 Time Limit: 2000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description FF得到了一个有n个数字的集 ...

  2. maven No compiler is provided environment

    eclipse maven操作正常出现的No compiler is provided in this environment. Perhaps you are running on a JRE ra ...

  3. jenkins-APP打包页面展示二维码【转】

    背景: 客户要求在APP打包页面展示二维码.虽然感觉这个功能很鸡肋,但是还是加上吧. 效果展示: 配置: 在上图中,106对应的内容是BuildName,我们可以通过build-name-setter ...

  4. Spring Eureka的使用入门

    Eureka调度服务: Gradle依赖包: 基础框架依赖配置核心代码: buildscript { repositories { mavenCentral() } dependencies {cla ...

  5. tornado 09 cookie和session

    tornado 09 cookie和session 一.cookie #有什么办法能够让浏览器记住登录信息,下次再打开的时候可以自动登录?网站是如何记录登录信息的? class SetCookieHa ...

  6. 114th LeetCode Weekly Contest Array of Doubled Pairs

    Given an array of integers A with even length, return true if and only if it is possible to reorder ...

  7. HDU - 4686 函数积的前缀和

    题意:求\(\sum_{i=0}^{n-1}a_ib_i\) 其中,\(a_i=A_xa_{i-1}+A_y,b_i=B_xb_{i-1}+B_y\) 构造矩阵分别维护\(a_ib_i,a_i,b_i ...

  8. apche 配置

    http://www.tootoogo.org/wordpress/?p=230 apache的配置由httpd.conf 文件配置. 1.基本配置 ServerRoot "/mnt/sof ...

  9. webpacke

    webpacke   安装 首先要安装 Node.js, Node.js 自带了软件包管理器 npm 用npm 安装webpack $ npm install webpack -g 此时 Webpac ...

  10. Gym - 100989

    B Although Haneen was able to solve the LCS problem, Dr. Ibrahim is suspicious about whether she rea ...