首页
所有分类
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 相关文章推荐
Jquery带搜索框的下拉菜单
May 06 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
Mar 19 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 Javascript
element ui table（表格）实现点击一行展开功能
Dec 04 Javascript
node.js的http.createServer过程深入解析
Jun 06 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
pyqt5(3) css3 (2) SpringBoot(22) Normal From(1) JSON(10) capture(1) Qlabel(1) pycharm(6) MybatisPlus(2) MapReduce(1)
You might like
ThinkPHP之A方法实例讲解
2014/06/20 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
浅析php适配器模式（Adapter）
2014/11/25 PHP
php中使用url传递数组的方法
2015/02/11 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
php 数组元素快速去重
2017/05/05 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
JS验证码实现代码
2017/09/14 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
Python解惑之整数比较详解
2017/04/24 Python
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
Python中最大递归深度值的探讨
2019/03/05 Python
Python将列表数据写入文件（txt, csv，excel）
2019/04/03 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
国际性能运动服装品牌：Dare 2b
2018/07/27 全球购物
公证委托书格式
2014/09/13 职场文书
四风自我剖析材料
2014/09/30 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
科普 | 业余无线电知识-波段篇
2022/02/18 无线电
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏