<!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="https://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> <div ng-mousedown="myEvent.mouseDown($event)" ng-mouseup="myEvent.mouseUp($event)" ng-mousemove="myEvent.mouseMove($event)"> <img ng-src="{{bgImg}}" load-image="getBoxPicSize()"> </div> </div> </div> </body> </html>
AngularJS实现的鼠标拖动画矩形框示例【可兼容I
内容版权声明：除非注明，否则皆为本站原创文章。
转载注明出处：http://www.heiqu.com/e14198de1f51e7934342508ee6c4734a.html