现在遇到一个问题，实现div在某个div范围内的缩放，目前是已经做好了缩放的功能，但是不太会做边界判断，希望各路大神能够给予帮助！！！
一下是实现了缩放的代码：
`/**
*
* @param {object} obj1 要缩放的元素
* @param {object} obj2 控制的节点
*/
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;
};
}`
网友评论