拖拽有多种写法，在这里就看一看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. CodeForces - 233A Perfect Permutation

    A. Perfect Permutation time limit per test: 2 seconds memory limit per test: 256 megabytes input: st ...

  2. python实现对象'+'操作符

    python对象实现__add__,__radd__方法即可实现'+'操作符 demo: # coding=utf-8 class Person(object): def __init__(self, ...

  3. JavaWeb学习笔记（十）—— JavaBean总结【转】

    一.什么是JavaBean JavaBean是一个遵循特定写法的Java类,它通常具有如下特点: 这个Java类必须具有一个无参的构造函数 属性必须私有化. 私有化的属性必须通过public类型的方法 ...

  4. 洛谷 P3244 / loj 2115 [HNOI2015] 落忆枫音 题解【拓扑排序】【组合】【逆元】

    组合计数的一道好题.什么非主流题目 题目背景 (背景冗长请到题目页面查看) 题目描述 不妨假设枫叶上有 \(n​\) 个穴位,穴位的编号为 \(1\sim n​\).有若干条有向的脉络连接着这些穴位. ...

  5. [转] Linux命令——timeout

    [From] https://blog.csdn.net/xiaqunfeng123/article/details/54315390 Linux命令——timeout 命令简介 运行指定的命令,如果 ...

  6. Maven-常规问题

    1.编译(compile)Maven项目时,报错: -Dmaven.multiModuleProjectDirectory system property is not set. 处理方案:Windo ...

  7. Android应用中添加Log4j的示例

    [2016-06-30]最新的log4j已经集成在DR_support_lib库中 具体请看: https://coding.net/u/wrcold520/p/DR_support_lib/git/ ...

  8. Kafka使用多个分区时 consumer的Assign配置

    天天在给自己挖坑排坑... 因为要开多线程消费,所以分区加到了10,两个broker. Producer没有做特殊处理,所以是随机发到Partitions. 但是Consumer只做Subscribe ...

  9. MVC JSON JavaScriptSerializer 进行序列化或反序列化时出错

    MVC control中返回json格式数据一般都是如下格式 [HttpPost] public ActionResult CaseAudit(string name) { var data =&qu ...

  10. scala 列表的子集判断

    val list1=List.range(0,5) val list2=List.range(0,2) val list3=List(0,6) list1.contains(2) list1.cont ...