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获取table下某一行某一列的值实现代码
Apr 07 jQuery
jquery replace方法去空格
May 08 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
jQuery+ajax实现文件上传功能
Dec 22 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
最小化数据传输――在客户端存储数据
2006/10/09 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
php日历制作代码分享
2014/01/20 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
Javascript与flash交互通信基础教程
2008/08/07 Javascript
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
js倒计时显示实例
2016/12/11 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
Python实现竖排打印传单手机号码易撕条
2015/03/16 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
职业规划书如何设计?
2014/01/09 职场文书
平面设计专业求职信
2014/08/09 职场文书
英文慰问信
2015/02/14 职场文书
党支部书记岗位职责
2015/02/15 职场文书
重阳节主题班会
2015/08/17 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript