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中each循环的简单回滚操作
May 05 jQuery
jquery仿微信聊天界面
May 06 jQuery
jQuery返回定位插件详解
May 15 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jQuery实现评论模块
Aug 19 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中session过期时间设置及session回收机制介绍
2014/05/05 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
vue-cli配置环境变量的方法
2018/07/09 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
python django集成cas验证系统
2014/07/14 Python
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
处理textarea中的换行和空格
2019/12/12 HTML / CSS
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
企业管理专业个人求职信范文
2013/09/24 职场文书
新春联欢会主持词
2014/03/24 职场文书
单位实习鉴定评语
2015/01/04 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
优质护理服务心得体会
2016/01/22 职场文书
python实现网络五子棋
2021/04/11 Python