首页
所有分类
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+xml自动生成表格的东西
Dec 21 Javascript
javascript 读取图片文件的大小
Jun 25 Javascript
IE6 fixed的完美解决方案
Mar 31 Javascript
javascript学习笔记(六) Date 日期类型
Jun 19 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 Javascript
javascript中2个感叹号的用法实例详解
Sep 04 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
Jan 20 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
白俄罗斯购物网站(3) 哈萨克斯坦购物网站(2) 冰岛购物网站(1) 乌克兰购物网站(27) 保加利亚购物网站(3) 罗马尼亚购物网站(10) 马耳他购物网站(1) 约旦购物网站(1) 希腊购物网站(6) PHP面试题(54)
You might like
人族 Terran 基本策略
2020/03/14 星际争霸
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
PHP网页游戏学习之Xnova(ogame)源码解读（十四）
2014/06/26 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
Bootstrap精简教程
2015/11/27 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
python计算最小优先级队列代码分享
2013/12/18 Python
python中enumerate函数用法实例分析
2015/05/20 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
python3 下载网络图片代码实例
2019/08/27 Python
德国baby-markt婴儿用品瑞士网站：baby-markt.ch
2017/06/09 全球购物
Hotter Shoes英国官网：英伦风格，舒适的鞋子
2017/12/28 全球购物
局域网定义和特性
2016/01/23 面试题
写自荐信的七个技巧
2013/10/15 职场文书
中专毕业生自荐信范文
2013/11/28 职场文书
三方协议书
2015/01/27 职场文书
公司奖励通知
2015/04/21 职场文书
你会写请假条吗？
2019/06/26 职场文书
JDBC连接的六步实例代码（与mysql连接）
2021/05/12 MySQL
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server
我去timi了，一起去timi是什么意思？
2022/04/13 杂记
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL