使用angular幫你實現拖拽

時間 2019-11-11

原文原文鏈接

拖拽有多種寫法，在這裏就看一看angular版的拖拽。javascript

<!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>

1. angular拖拽指令-
2. 用類實現拖拽div
3. RecyclerView使用ItemTouchHelper實現拖拽排序
4. RecyclerVIew拖拽實現
5. canvas 拖拽實現
6. 實現Div拖拽
7. js 實現拖拽
8. MFC實現拖拽
9. js 拖拽實現
10. ECharts實現拖拽
更多相關文章...
• 使用Redis和Lua的原子性實現搶紅包功能 - 紅包項目實戰
• 現實生活中的 XML - XML 教程
• ☆基於Java Instrument的Agent實現
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。