cari

Rumah  >  Artikel  >  hujung hadapan web  >  用angular实现拖拽的实例代码

用angular实现拖拽的实例代码

零下一度
零下一度asal
2017-07-18 17:40:491323semak imbas

拖拽有多种写法，在这里就看一看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?1.1.11" type="text/javascript" charset="utf-8"></script>
		<script src="../js/angular.min.js?1.1.11" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
//			自定义一个模块
			var app = angular.module("myApp",[]);
//			自定义指令  自定义指令时一定要使用驼峰命名法
			app.directive(&#39;myDrag&#39;,function(){
//				返回一个函数
				return{
					link : function(scope,element,attr){
//						scope可以接收到的数据
// 						element 当前的元素
//						attr属性

//						拖拽的三大事件mousedown,mousemove,mouseup.使用jq绑定事件的方法进行绑定
						element.on(&#39;mousedown&#39;,function(ev){
//							通过event获取到当前对象
							var This = $(this);
//							获取到鼠标离当前元素上边框的距离
							var disX = ev.clientX - $(this).offset().left;
//							获取到元素距离左边框的距离  
//							因为在拖拽的过程中不变的是鼠标距离元素边框的距离  通过不变和已知求变量
							var disY = ev.clientY - $(this).offset().top;
							$(document).on(&#39;mousemove&#39;,function(ev){
//								将所改变的值通过样式设置给当前元素
								This.css({
									left:ev.clientX - disX,
									top:ev.clientY - disY,
								});
							});
							$(document).on(&#39;mouseup&#39;,function(){
//								鼠标松开时关闭所有事件
								$(document).off();
							})
						})
					},
					restrict:&#39;A&#39;, //ECMA    	E元素  C类名 M注释 A属性
				};
			});
		</script>
</html>

　　

Atas ialah kandungan terperinci 用angular实现拖拽的实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Javascript事件委托相关详解Artikel seterusnya：用JS做出可以行动的小人方法

Artikel berkaitan

Lihat lagi