AngularJS實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)畫矩形框示例【可兼容IE8】

2024-05-06 15:39:22

字體：大中小

供稿：網(wǎng)友

本文實(shí)例講述了AngularJS實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)畫矩形框。分享給大家供大家參考，具體如下：

<!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內(nèi)核的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內(nèi)核的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) {      //阻止默認(rèn)行為      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,//按下時(shí)鼠標(biāo)距離的左邊的距離        "top": startT//按下時(shí)鼠標(biāo)距離的上邊的距離      }      var myEvent = $scope.myEvent = {        //鼠標(biāo)點(diǎn)擊        mouseDown: function(e) {          flag = true;          var e = window.event || e;          target = e.target || e.srcElement; //獲取document 對(duì)象的引用          //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;          //按下時(shí)鼠標(biāo)距離頁(yè)面的距離          startX = ePageX;          startY = ePageY;          //按下時(shí)鼠標(biāo)距離的左邊和上邊的距離          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;          // 如果鼠標(biāo)在 box 上被按下          if(target.className.match(/del-box/i)) {            // 允許拖動(dòng)            flag = false;            // 設(shè)置當(dāng)前 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;          }        },        //鼠標(biāo)離開        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;        },        //鼠標(biāo)移動(dòng)        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>

上一篇：vue中使用mxgraph的方法實(shí)例代碼詳解

下一篇：vue中引入mxGraph的步驟詳解