首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMay 17, 2019

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家AngularJS程序设计有所帮助。

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

- Author -

longzhoufeng

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js 调用本地exe的例子(支持IE内核的浏览器)
Dec 26 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
JavaScript中DOM详解
Apr 13 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
May 26 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 Javascript
微信小程序如何使用云开发
May 17 #Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 #Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 #Javascript
JS简单数组排序操作示例【sort方法】
May 17 #Javascript
微信小程序云开发（数据库）详解
May 17 #Javascript
JS实现的自定义map方法示例
May 17 #Javascript
javascript异步编程的六种方式总结
May 17 #Javascript
expdp(1) 云服务器(1) 数据备份(2) queue(1) Foreign Key(1) JDK(1) 腾讯云(1) Vite(1) 内存池(1) 外键约束(1)
You might like
咖啡豆的最常见发酵处理方法，详细了解一下
2021/03/03 冲泡冲煮
图书管理程序（三）
2006/10/09 PHP
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
如何设置mysql允许外网访问
2013/06/04 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
jQuery Clone Bug解决代码
2010/12/22 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
python安装教程
2018/02/28 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
python批量爬取下载抖音视频
2019/06/17 Python
python解释器spython使用及原理解析
2019/08/24 Python
Python使用re模块验证危险字符
2020/05/21 Python
Europcar英国：英国汽车和货车租赁
2017/01/21 全球购物
Ted Baker英国官网：男士和女士服装及配件
2017/03/13 全球购物
Lentiamo比利时：便宜的隐形眼镜
2020/02/14 全球购物
经典公益广告词
2014/03/13 职场文书
治超工作实施方案
2014/05/04 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
工作保证书怎么写
2015/02/28 职场文书
丧事答谢词大全
2015/09/30 职场文书
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis