首页
所有分类
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 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
javascript两段代码,两个小技巧
Feb 04 Javascript
我的javascript 函数链之演变
Apr 07 Javascript
JS获取页面窗口大小的代码解读
Dec 01 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 Javascript
javascript闭包功能与用法实例分析
Apr 06 Javascript
javascript 中iframe高度自适应（同域）实例详解
May 16 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 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
RabbitMQ(3) 目录管理(1) 触发器(3) Vmware(3) 入门基础(1) plus.io(1) html5+(1) 磁盘管理(1) 虚拟机(3) Hash(1)
You might like
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
jQuery 隔行换色 支持键盘上下键，按Enter选定值
2009/08/02 Javascript
js loading加载效果实现代码
2009/11/24 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
详解Vue.js 作用域、slot用法（单个slot、具名slot）
2019/10/15 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
python开发中range()函数用法实例分析
2015/11/12 Python
python实现下载整个ftp目录的方法
2017/01/17 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
python实现自动登录后台管理系统
2018/10/18 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
工作过失检讨书
2014/02/23 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
关于运动会的广播稿
2015/08/19 职场文书
python双向链表实例详解
2022/05/25 Python