html鼠标拖动画矩形,jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】

本文实例讲述了jQuery实现的鼠标拖动画矩形框。分享给大家供大家参考，具体如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

鼠标拖动画矩形

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);

}

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)

}

}

};

}

感兴趣的朋友可以使用如下工具测试上述代码运行效果：

希望本文所述对大家jQuery程序设计有所帮助。