AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】

2019-11-19 11:32:27

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：vue-cli3 配置开发与测试环境详解

下一篇：微信小程序如何使用云开发