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

2020-05-24 21:42:53易采站长站整理

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