首页
所有分类
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 相关文章推荐
对象特征检测法判断浏览器对javascript对象的支持
Jul 25 Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
Angularjs 手写日历的实现代码（不用插件）
Oct 18 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
浅析node.js的模块加载机制
May 25 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 Javascript
TS 类型兼容教程示例详解
Sep 23 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
进程假死(1) 逆序(1) UV(1) jenkins(1) PV(1) 弱口令(1) 线程(1) 连接数(1) 访问日志(2) ipv6(1)
You might like
PHP 模板高级篇总结
2006/12/21 PHP
jQuery 源码分析笔记
2011/05/25 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
对联广告js flash激活
2006/10/19 Javascript
javascript入门基础之私有变量
2010/02/23 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
使用Python的判断语句模拟三目运算
2015/04/24 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
Django缓存系统实现过程解析
2019/08/02 Python
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
SK-II神仙水美国官网：SK-II美国
2020/02/25 全球购物
Abbott Lyon官网：女士手表、珠宝及配件
2020/12/26 全球购物
师范大学毕业自我鉴定
2013/11/21 职场文书
求职简历推荐信范文
2013/12/02 职场文书
护理毕业生自我鉴定
2014/02/11 职场文书
阳光体育活动方案
2014/02/16 职场文书
库房保管员岗位职责
2014/04/07 职场文书
领导干部对照检查材料
2014/08/24 职场文书
药品开票员岗位职责
2015/04/15 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python