JS拖拽的进一步练习,移动与拉伸实现代码
直接在本地是支持IE6的,有个问题就是,鼠标点击的时候光标会变为选择文字的光标,不知道应该怎么处理这个问题呢?
在此记录一下代码:
简单拖拽扩展
*{margin:0;padding:0;}
#outwarp{ margin:20px auto; width:600px; height:600px; background:#fff; border:1px solid #333; position: relative; }
.controlBox{ width:200px; height:200px; position: absolute; left:25px; top:50px; background:#ccc; font-size:12px; color:#fff; border: 1px solid #333;}
.controlBar{cursor: move;}
.controlBar h2{ font-size:12px; text-align: center; line-height: 25px; background: blue;}
.innerCon{text-align: left; line-height: 20px;}
.innerCon p{ padding: 10px; color: #000;}
.resize{ position: absolute; height: 10px; width:10px; color: white; z-index: 10; background: red;}
.lt{left:0;right:0; cursor:nw-resize;}
.tr{right:0;top: 0;cursor:ne-resize;}
.rb{right:0;bottom: 0; cursor:nw-resize;}
.bl{left:0;bottom:0;cursor:ne-resize;}
按此处拖动
中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间
内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容
中间内容中间内容中间内容中间内容中间内容中间内容
(function () {
//定义便捷函数getElementById,getElementsByTagName,getElementsByClassName,bindFunction,bindEvent
function $() {
var elements = new Array();
for (var i = 0; i (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) this.warpWidth) myStyle.width = ( this.warpWidth - this.controlBoxLeft) + 'px';
if ( parseInt(myStyle.width) 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) this.controlBoxHeight + this.controlBoxTop){
my.style.height = (this.controlBoxHeight + this.controlBoxTop) + 'px';
if(parseInt(my.style.top) this.lt_x){
my.style.width = this.lt_x + 'px';
my.style.left = 0;
}
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'
});
})()
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]