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


Posted in jQuery onMay 17, 2019

本文实例讲述了jQuery实现的鼠标拖动画矩形框。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
  <title>鼠标拖动画矩形</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <style type="text/css">
    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}
    html {color: #000;overflow-y: scoll;overflow: -moz-scrollbars-vertical}
    #confirmingAppraisal {
      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;z-index: 9997; border: 1px dashed red; width: 0px; height: 0px;left: 0px; top: 0px; overflow: hidden;}
    #moving_box {background-color: #0A90DB;}
    .question-box {
      position: absolute;
      z-index: 9998;
      /*background: red;*/
      /* older safari/Chrome browsers */
      -webkit-opacity: 0.8;
      /* Netscape and Older than Firefox 0.9 */
      -moz-opacity: 0.8;
      /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
      -khtml-opacity: 0.8;
      /* IE9 + etc...modern browsers */
      opacity: .8;
      /* IE 4-9 */
      filter: alpha(opacity=80);
      /*This works in IE 8 & 9 too*/
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
      /*IE4-IE9*/
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    }
    .question-border {z-index: 9999;border: 2px dashed red;overflow: hidden; }
    .del-box {
      width: 17px;
      height: 17px;
      float: right;
      position: relative;
      margin-top: 1px;
      margin-right: 1px;
      z-index: 99999999999;
      background: url(del.png);
    }
  </style>
  <script language="javascript">
    window.onload = function() {
      function stopDefault(e) {
        if(e && e.preventDefault)
          e.preventDefault();
        else
          window.event.returnValue = false;
        return false;
      }
      function oBox() {
        var wId = "w";
        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("confirmingAppraisal");
        var frame = $("#confirmingAppraisal");
        var referenceSize = {
          "pos": frame.offset(),
          "width": frame.outerWidth(),
          "height": frame.outerHeight()
        }
        var newMarkPos = {
          "left": startL,////按下时鼠标距离的左边的距离
          "top": startT////按下时鼠标距离的上边的距离
        }
        //鼠标点击
        boxObj.onmousedown = 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 - referenceSize.pos.left;
          startT = startY - referenceSize.pos.top;
          index++;
          // 如果鼠标在 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;
          }
        }
        //鼠标离开
        boxObj.onmouseup = function(e) {
          var e = window.event || e;
          if(boxWidth >= 1 || boxHeight >= 1) {
            boxObj.removeChild(dragBox(wId + index));
            index++;
            var div = document.createElement("div");
            var spanObj = document.createElement("span");
            spanObj.className = 'del-box';
            div.appendChild(spanObj);
            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;
        }
        //鼠标移动
        boxObj.onmousemove = 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";
            stopDefault(e)
          }
        }
        var dragBox = function(id) {
          return document.getElementById(id);
        }
      };
      oBox();
      function removeBox(obj) {
        if(obj) {
          var confirmingAppraisal = document.getElementById('confirmingAppraisal');
          if(obj.className == 'del-box') {
            var objId = document.getElementById(obj.id);
            confirmingAppraisal.removeChild(objId.parentNode);
          } else {
            alert(123)
          }
        }
      };
    }
  </script>
</head>
<body style="overflow: hidden">
<div class="confirming-appraisal">
  <div id="confirmingAppraisal">
    <img src="1.jpg" style="position: absolute;width: 1000px;height: 1600px;">
  </div>
</div>
</body>
</html>

感兴趣的朋友可以使用如下工具测试上述代码运行效果:

在线HTML/CSS/JavaScript代码运行工具:
http://tools.3water.com/code/HtmlJsRun

在线HTML/CSS/JavaScript前端代码调试运行工具:
http://tools.3water.com/code/WebCodeRun

更多关于jQuery相关内容还可查看本站专题:《jQuery动画与特效用法总结》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

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

jQuery 相关文章推荐
jquery.validate表单验证插件使用详解
Jun 21 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 #jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 #jQuery
Vue项目中使用jquery的简单方法
May 16 #jQuery
JQuery常见节点操作实例分析
May 15 #jQuery
JQuery属性操作与循环用法示例
May 15 #jQuery
jquery+css实现Tab栏切换的代码实例
May 14 #jQuery
jquery实现二级导航下拉菜单效果实例
May 14 #jQuery
You might like
PHP开发大型项目的一点经验
2006/10/09 PHP
PHP令牌 Token改进版
2008/07/18 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
python获取当前计算机cpu数量的方法
2015/04/18 Python
python re模块findall()函数实例解析
2018/01/19 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
详解python中的模块及包导入
2019/08/30 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
机械设计制造专业个人求职信
2013/09/25 职场文书
大学生简历的个人自我评价
2013/12/04 职场文书
前台接待员岗位职责
2014/01/02 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
简爱电影观后感
2015/06/10 职场文书
详解nodejs内置模块
2021/05/06 NodeJs
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python