<!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="https://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> <div> <div> <img src="https://www.jb51.net/article/1.jpg"> </div> </div> </body> </html>
感兴趣的朋友可以使用如下工具测试上述代码运行效果：