本文實例講述了AngularJS實現的鼠標拖動畫矩形框。分享給大家供大家參考，具體如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> html {color: #000;overflow-y: scoll;overflow: -moz-scrollbars-vertical} body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; overflow: hidden; } #longzhoufeng { position: relative; left: 0; top: 0; margin: 0 auto; padding: 0; width: 800px; min-height: 800px; overflow: auto; height: 1000px; background-color: #e9e9e9; } .dashed-box { position: absolute; border: 1px dashed red; width: 0px; height: 0px; left: 0px; top: 0px; overflow: hidden; } #moving_box { border: 2px solid red; } .question-box { position: absolute; /* older safari/Chrome browsers */ -webkit-opacity: 0.5; /* Netscape and Older than Firefox 0.9 */ -moz-opacity: 0.5; /* Safari 1.x (pre WebKit!) 老式khtml內核的Safari瀏覽器*/ -khtml-opacity: 0.5; /* IE9 + etc...modern browsers */ opacity: .5; /* IE 4-9 */ filter: alpha(opacity=50); /*This works in IE 8 & 9 too*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*IE4-IE9*/ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); } .question-border { border: 2px dashed red; overflow: hidden; z-index: 1; } .del-box { width: 20px; height: 20px; float: right; color: #fff; position: relative; margin-top: 1px; margin-right: 1px; z-index: 99; background-color: red; } .active-border { border: 2px solid red; -webkit-opacity: 0.5; /* Netscape and Older than Firefox 0.9 */ -moz-opacity: 0.5; /* Safari 1.x (pre WebKit!) 老式khtml內核的Safari瀏覽器*/ -khtml-opacity: 0.5; /* IE9 + etc...modern browsers */ opacity: .5; /* IE 4-9 */ filter: alpha(opacity=50); /*This works in IE 8 & 9 too*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*IE4-IE9*/ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); } .box-background-image { position: absolute; width: 1000px; height: 1600px; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="https://cdn.bootcss.com/angular.js/1.0.5/angular.min.js"></script> <script> var app = angular.module('miniapp', []); function AppController($scope, $timeout) { //阻止默認行為 function stopDefault(e) { if(e && e.preventDefault) e.preventDefault(); else window.event.returnValue = false; return false; } $scope.bgImg = '1.jpg'; $scope.getBoxPicSize = function() { $scope.bgWidth = angular.element(".box-background-image").width(); $scope.bgHeight = angular.element(".box-background-image").height(); } /////////////////////////////////////// var wId = "num"; var index = 0; var target = null; var startX = 0, startY = 0; var flag = false; var startL = 0, startT = 0, boxHeight = 0, boxWidth = 0; var boxObj = document.getElementById("longzhoufeng"); var frame = $("#longzhoufeng"); var frameBox = { "pos": frame.offset(), "width": frame.outerWidth(), "height": frame.outerHeight() } var newMarkPos = { "left": startL,//按下時鼠標距離的左邊的距離 "top": startT//按下時鼠標距離的上邊的距離 } var myEvent = $scope.myEvent = { //鼠標點擊 mouseDown: function(e) { flag = true; var e = window.event || e; target = e.target || e.srcElement; //獲取document 對象的引用 //e.pageY，e.pageX兼容 if(target.src) { stopDefault(e) } var scrollTop = boxObj.scrollTop; var scrollLeft = boxObj.scrollLeft; var ePageX = e.clientX + scrollLeft; var ePageY = e.clientY + scrollTop; //按下時鼠標距離頁面的距離 startX = ePageX; startY = ePageY; //按下時鼠標距離的左邊和上邊的距離 startL = startX - frameBox.pos.left; startT = startY - frameBox.pos.top; index++; var div = document.createElement("div"); div.id = wId + index; div.className = "dashed-box"; boxObj.appendChild(div); div = null; // 如果鼠標在 box 上被按下 if(target.className.match(/del-box/i)) { // 允許拖動 flag = false; // 設置當前 box 的 id 為 moving_box var movingBox = document.getElementById("moving_box") if(movingBox !== null) { movingBox.removeAttribute("id"); } target.id = "moving_box"; // removeBox(target); } else { var div = document.createElement("div"); div.id = wId + index; div.className = "dashed-box"; boxObj.appendChild(div); div = null; } }, //鼠標離開 mouseUp: function(e) { var e = window.event || e; if(boxWidth >= 1 || boxHeight >= 1) { boxObj.removeChild(dragBox(wId + index)); index++; var div = document.createElement("div"); div.className = "question-box question-border"; div.style.left = newMarkPos.left + "px"; div.style.top = newMarkPos.top + "px"; div.style.width = boxWidth + "px"; div.style.height = boxHeight + "px"; boxObj.appendChild(div); div = null; boxWidth = 0; boxHeight = 0; } else { if(flag) { boxObj.removeChild(dragBox(wId + index)); } } flag = false; }, //鼠標移動 mouseMove: function(e) { var e = window.event || e; stopDefault(e) if(flag) { var scrollTop = boxObj.scrollTop; var scrollLeft = boxObj.scrollLeft; var ePX = e.clientX + scrollLeft; var ePY = e.clientY + scrollTop; var disW = ePX - startX; var disH = ePY - startY; var L = startL + disW; var T = startT + disH; if(disW > 0) { if(L >= 0) { boxWidth = disW } newMarkPos.left = startL; } else { if(L <= 0) { L = 0; boxWidth = startL; } boxWidth = (startL - L); newMarkPos.left = L; } if(disH > 0) { if(T >= 0) { boxHeight = disH } newMarkPos.top = startT; } else { if(T <= 0) { T = 0; boxHeight = startT; } boxHeight = (startT - T) newMarkPos.top = T; } dragBox(wId + index).style.left = newMarkPos.left + "px"; dragBox(wId + index).style.top = newMarkPos.top + "px"; dragBox(wId + index).style.width = Math.abs(boxWidth) + "px"; dragBox(wId + index).style.height = Math.abs(boxHeight) + "px"; if(e.srcElement.src) { stopDefault(e) } } } } var dragBox = function(id) { return document.getElementById(id); } } //等待圖片加載完成 app.directive("loadImage", function() { return { restrict: 'A', link: function(scope, element, attrs) { element.bind('load', function() { scope.$apply(attrs.loadImage); }); } } }) </script></head><body><div ng-app="miniapp" ng-controller="AppController"> <div class="main"> <div id="longzhoufeng" ng-mousedown="myEvent.mouseDown($event)" ng-mouseup="myEvent.mouseUp($event)" ng-mousemove="myEvent.mouseMove($event)"> <img ng-src="{{bgImg}}" class="box-background-image" load-image="getBoxPicSize()"> </div> </div></div></body></html>感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun測試上述代碼運行效果。
更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
新聞熱點
疑難解答
