JS拖拽的进一步练习，移动与拉伸实现代码_javascript技巧-js教程-PHP中文网

直接在本地是支持IE6的，有个问题就是，鼠标点击的时候光标会变为选择文字的光标，不知道应该怎么处理这个问题呢？
在此记录一下代码：

腾讯AI 开放平台

腾讯AI开放平台

381

// 光标相对outwarp层的坐标 
var posx = mousex + this.scrollLeft - this.warpLeft; 
var posy = mousey + this.scrollTop - this.warpTop; 
// 多次用到this.controlBox 赋值一个短变量名 
var my = this.controlBox; 
// 多次用到this.controlBox.style，赋值一个短变量名 
var myStyle = my.style; 
// 最小尺寸 
var minWidth = 200,minHeight = 200; 
switch(event.type){ 
case 'mousedown': 
/*记录相关初始信息*/ 
if(target.parentNode.className.indexOf('controlBar')!=-1){ 
this.draging = this.controlBox; //赋值拖动对象 
} 
if(target.className.indexOf('rb')!= -1){ 
this.draging = this.resizeRb; // 赋值为右下角拖动 
} 
if(target.className.indexOf('tr')!= -1){ 
this.draging = this.resizeTr; // 赋值为右上角改变大小 
} 
if(target.className.indexOf('lt')!= -1){ 
this.draging = this.resizeLt; // 赋值为左上角改变大小 
} 
if(target.className.indexOf('bl') != -1){ 
this.draging = this.resizeBl; 
}

//alert('this.scrollTop:'+this.scrollTop); 
//点击时记录拖动层的初始信息 
this.controlBoxWidth = my.offsetWidth; //拖动层的宽度 
this.controlBoxHeight = my.offsetHeight; //拖动层的宽度 
this.controlBoxLeft = my.offsetLeft; //拖动层的LEFT坐标 
this.controlBoxTop = my.offsetTop; //拖动层的TOP坐标 
// 记录鼠标按下时鼠标相对与拖动层的距离 
this.mx = posx - this.controlBoxLeft; 
this.my = posy - this.controlBoxTop; 
// 记录左下角的坐标，因为按住右上拖动的时候左下角不动 
this.lb_x = my.offsetWidth + my.offsetLeft; 
this.lb_y = my.offsetHeight + my.offsetTop; 
console.log('my.offsetHeight:'+my.offsetHeight+'my.offsetTop:'+my.offsetTop); 
// 记录右下角坐标，按住左上角拖动的时候右下角不动 
this.rb_x = my.offsetLeft + my.offsetWidth; 
this.rb_y = my.offsetTop + my.offsetHeight; 
// 记录右上角坐标，当按住左下角的时候右上角不动 
this.lt_x = my.offsetLeft + my.offsetWidth; 
this.lt_y = my.offsetTop; 
break; 
case 'mousemove': 
if (this.draging == this.controlBox){ 
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //取消页面上由于鼠标按下拖动造成的选中文字和图片的选择状态 
//拖动层的位置 
var left = posx - this.mx; 
var top = posy - this.my; 
left < 0 && (left = 0); 
top < 0 && (top = 0); 
left > (this.warpWidth - this.controlBoxWidth) && (left = this.warpWidth - this.controlBoxWidth); 
top > (this.warpHeight - this.controlBoxHeight) && (top = this.warpHeight - this.controlBoxHeight); 
//改变位置 
myStyle.left = left + 'px'; 
myStyle.top = top + 'px'; 
//右下角拖动 
} else if (this.draging == this.resizeRb) { 
// 需要改变的宽度 
var changeWidth = posx - this.controlBoxWidth - this.controlBoxLeft, 
changeHeight = posy - this.controlBoxHeight - this.controlBoxTop, 
// 计算总宽度 
allWidth = this.controlBoxWidth + changeWidth + this.controlBoxLeft , 
allHeight = this.controlBoxHeight + changeHeight + this.controlBoxTop; 
//改变宽度 
myStyle.width = (this.controlBoxWidth + changeWidth) + 'px'; 
myStyle.height = (this.controlBoxHeight + changeHeight) + 'px'; 
// 限制最大宽度 
if (allWidth > this.warpWidth) { 
myStyle.width = ( this.warpWidth - this.controlBoxLeft) + 'px'; 
} 
if (allHeight > this.warpHeight) { 
myStyle.height = (this.warpHeight - this.controlBoxTop) + 'px'; 
} 
// 限制最小宽度 
if ( parseInt(myStyle.width) < minWidth)myStyle.width = minWidth + 'px'; 
if (parseInt(myStyle.height) < minHeight) myStyle.height = minHeight + 'px'; 
// 右上角 
} else if (this.draging == this.resizeTr) { 
// 需要改变的宽度，该变高度即改变TOP的坐标 
changeWidth = posx - this.controlBoxWidth - this.controlBoxLeft; 
// 计算总宽度 
allWidth = this.controlBoxWidth + changeWidth + this.controlBoxLeft; 
// 改变宽度 
myStyle.width = (this.controlBoxWidth + changeWidth) + 'px'; 
if (allWidth > this.warpWidth) myStyle.width = ( this.warpWidth - this.controlBoxLeft) + 'px'; 
if ( parseInt(myStyle.width) < minWidth) myStyle.width = minWidth + 'px'; 
// 改变高度 
my.style.top = posy + 'px'; 
my.style.height = (this.controlBoxHeight + (this.controlBoxTop - posy)) +'px'; 
if(parseInt(my.style.height)< minHeight){ 
my.style.height = minHeight +'px'; 
my.style.top = (this.lb_y - minHeight) + 'px'; 
} 
if(parseInt(my.style.height)>this.lb_y){ 
my.style.height = this.lb_y + 'px'; 
my.style.top = 0; 
} 
// 左上角 
}else if (this.draging == this.resizeLt) { 
changeWidth = this.controlBoxLeft - posx; 
changeHeight = this.controlBoxTop - posy; 
my.style.left = posx + 'px'; 
my.style.width = (this.controlBoxWidth + changeWidth) + 'px'; 
my.style.top = posy + 'px'; 
my.style.height = (this.controlBoxHeight + changeHeight) + 'px'; 
// 限制宽高度最大值 
if(parseInt(my.style.width) > this.controlBoxLeft + this.controlBoxWidth){ 
my.style.width = (this.controlBoxLeft + this.controlBoxWidth) + 'px'; 
my.style.left = 0; 
}else if(parseInt(my.style.width)< minWidth){ 
my.style.left = (this.rb_x - minWidth) + 'px'; 
my.style.width = minWidth + 'px'; 
} 
if(parseInt(my.style.height) > this.controlBoxHeight + this.controlBoxTop){ 
my.style.height = (this.controlBoxHeight + this.controlBoxTop) + 'px'; 
if(parseInt(my.style.top)<0) my.style.top = 0; 
}else if(parseInt(my.style.height)< minHeight){ 
my.style.top = (this.rb_y - minHeight) + 'px'; 
my.style.height = minHeight + 'px'; 
} 
// 左下角 
}else if(this.draging == this.resizeBl){ 
changeWidth = this.controlBoxLeft - posx; 
changeHeight = posy - this.controlBoxHeight - this.controlBoxTop; 
my.style.left = posx + 'px'; 
my.style.width = this.controlBoxWidth + changeWidth + 'px'; 
my.style.height = this.controlBoxHeight + changeHeight + 'px'; 
if(parseInt(my.style.width)< minWidth){ 
my.style.width = minWidth + 'px'; 
my.style.left = this.lt_x - minWidth + 'px'; 
}else if(parseInt(my.style.width)> this.lt_x){ 
my.style.width = this.lt_x + 'px'; 
my.style.left = 0; 
} 
if(parseInt(my.style.height)< minHeight){ 
my.style.height = minHeight + 'px'; 
}else if(parseInt(my.style.height)> this.warpHeight- this.lt_y){ 
my.style.height = this.warpHeight- this.lt_y +'px'; 
} 
} 
break;

case 'mouseup': 
this.draging = null; 
break; 
} 
}, 
bind:function () { 
var that = this; 
bindEvent(document, 'mousedown', bindFunction(that,that.moveBox)); 
bindEvent(document, 'mousemove', bindFunction(that,that.moveBox)); 
bindEvent(document, 'mouseup', bindFunction(that,that.moveBox)); 
} 
}; 
var demo = new DragBox({ 
outWarpId:'outwarp' 
}); 
})() 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]