現(xiàn)在遇到一個(gè)問(wèn)題,實(shí)現(xiàn)div在某個(gè)div范圍內(nèi)的縮放,目前是已經(jīng)做好了縮放的功能,但是不太會(huì)做邊界判斷,希望各路大神能夠給予幫助?。?!
一下是實(shí)現(xiàn)了縮放的代碼:
`/**
*
* @param {object} obj1 要縮放的元素
* @param {object} obj2 控制的節(jié)點(diǎn)
*/
function dragFn(obj1, obj2) {
obj2.onmousedown = function(ev) {
reszing = true;
draping = false;
var oEv = ev || event;
oEv.stopPropagation();
var oldWidth = obj1.offsetWidth;
var oldHeight = obj1.offsetHeight;
var oldX = oEv.clientX;
var oldY = oEv.clientY;
var oldLeft = obj1.offsetLeft;
var oldTop = obj1.offsetTop;
document.onmousemove = function(ev) {
var oEv = ev || event;
if(obj2.className == 'resizeLT') {
obj1.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
obj1.style.height = oldHeight - (oEv.clientY - oldY) + 'px';
obj1.style.left = oldLeft + (oEv.clientX - oldX) + 'px';
obj1.style.top = oldTop + (oEv.clientY - oldY) + 'px';
// console.log(obj1.style.left, obj1.style.top);
} else if(obj2.className == 'resizeLB') {
// if(oldLeft + (oEv.clientX - oldX)<0){
// reszing = false;
// }
// if(oldTop + (oEv.clientY + oldY)<0){
// reszing = false;
// }
obj1.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
obj1.style.height = oldHeight + (oEv.clientY - oldY) + 'px';
obj1.style.left = oldLeft + (oEv.clientX - oldX) + 'px';
obj1.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';
} else if(obj2.className == 'resizeTR') {
// if(oldLeft - (oEv.clientX - oldX)<0){
// document.onmousemove=null;
// }
// if(oldTop + (oEv.clientY - oldY)<0){
// document.onmousemove=null;
// }
obj1.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
obj1.style.height = oldHeight - (oEv.clientY - oldY) + 'px';
obj1.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
obj1.style.top = oldTop + (oEv.clientY - oldY) + 'px';
} else if(obj2.className == 'resizeBR') {
// if(oldLeft - (oEv.clientX - oldX)<0){
//
// document.onmousemove=null;
// }
// if(oldTop + (oEv.clientY + oldY)<0){
//
// document.onmousemove=null;
// }
//
obj1.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
obj1.style.height = oldHeight + (oEv.clientY - oldY) + 'px';
obj1.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
obj1.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';
} else if(obj2.className == 'resizeT') {
// if(oldTop + (oEv.clientY - oldY)<0){
//
// document.onmousemove=null;
// }
obj1.style.height = oldHeight - (oEv.clientY - oldY) + 'px';
obj1.style.top = oldTop + (oEv.clientY - oldY) + 'px';
} else if(obj2.className == 'resizeB') {
// if(oldTop - (oEv.clientY + oldY)<0){
//
// document.onmousemove=null;
// }
obj1.style.height = oldHeight + (oEv.clientY - oldY) + 'px';
obj1.style.bottom = oldTop - (oEv.clientY + oldY) + 'px';
} else if(obj2.className == 'resizeL') {
// if(oldLeft + (oEv.clientX - oldX)<0){
//
// document.onmousemove=null;
// }
obj1.style.height = oldHeight + 'px';
obj1.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
obj1.style.left = oldLeft + (oEv.clientX - oldX) + 'px';
} else if(obj2.className == 'resizeR') {
// if( oldLeft - (oEv.clientX - oldX)<0){
//
// document.onmousemove=null;
// }
obj1.style.height = oldHeight + 'px';
obj1.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
obj1.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
}
console.log("resizeW:"+obj1.style.left,"resizeH:"+obj1.style.top);
};
document.onmouseup = function() {
document.onmousemove = null;
};
return false;
};
}`