溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jQuery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)畫(huà)矩形框示例【可兼容IE8】

發(fā)布時(shí)間：2020-10-14 00:58:43 來(lái)源：腳本之家 閱讀：245 作者：longzhoufeng 欄目：web開(kāi)發(fā)

本文實(shí)例講述了jQuery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)畫(huà)矩形框。分享給大家供大家參考，具體如下：

<!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>鼠標(biāo)拖動(dòng)畫(huà)矩形</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, h2, h3, h4, h5, h6, h7, 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內(nèi)核的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,////按下時(shí)鼠標(biāo)距離的左邊的距離
          "top": startT////按下時(shí)鼠標(biāo)距離的上邊的距離
        }
        //鼠標(biāo)點(diǎn)擊
        boxObj.onmousedown = function(e) {
          flag = true;
          var e = window.event || e;
          target = e.target || e.srcElement; //獲取document 對(duì)象的引用
          //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;
          //按下時(shí)鼠標(biāo)距離頁(yè)面的距離
          startX = ePageX;
          startY = ePageY;
          //按下時(shí)鼠標(biāo)距離的左邊和上邊的距離
          startL = startX - referenceSize.pos.left;
          startT = startY - referenceSize.pos.top;
          index++;
          // 如果鼠標(biāo)在 box 上被按下
          if(target.className.match(/del-box/i)) {
            // 允許拖動(dòng)
            flag = false;
            // 設(shè)置當(dāng)前 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;
          }
        }
        //鼠標(biāo)離開(kāi)
        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;
        }
        //鼠標(biāo)移動(dòng)
        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 >
<div class="confirming-appraisal">
  <div id="confirmingAppraisal">
    <img src="1.jpg" >
  </div>
</div>
</body>
</html>

感興趣的朋友可以使用如下工具測(cè)試上述代碼運(yùn)行效果：

在線HTML/CSS/JavaScript代碼運(yùn)行工具：
http://tools.jb51.net/code/HtmlJsRun

在線HTML/CSS/JavaScript前端代碼調(diào)試運(yùn)行工具：
http://tools.jb51.net/code/WebCodeRun

更多關(guān)于jQuery相關(guān)內(nèi)容還可查看本站專題：《jQuery動(dòng)畫(huà)與特效用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手