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+Ajax实现用户名重名实时检测
Jun 01 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
如何在vue 中引入使用jquery
Nov 10 jQuery
jQuery treeview树形结构应用
Mar 24 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实现mysql同步的实现方法
2009/10/21 PHP
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
培养自己的php编码规范
2015/09/28 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
python数据结构之链表的实例讲解
2017/07/25 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
网吧最新创业计划书范文
2014/03/27 职场文书
招股说明书范本
2014/05/06 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
文员求职信
2014/07/15 职场文书
关于环保的活动方案
2014/08/25 职场文书
解除租房协议书
2014/12/03 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS