先看例子:
外链网址已屏蔽
效果描述:
(1) 鼠标点击"
(2)滚动网页的竖直滚动条时,该窗口的位置固定不变;
(3)无论怎么移动,该窗口不会跑到网页可视范围之外
关键code:
// 拖拽效果
function drag(){
var tags = arguments;
// alert(tags[0].length);//长度为4
for(var i=0;i
// addEvent(tags[0].get(i),'mousedown',function(e){
$(tags[0].get(i)).bind('mousedown',function(e){
if(trim(this.innerHTML).length == 0) e.preventDefault();
var _this = this;
// var diffX = e.clientX - _this.offsetLeft;
// var diffY = e.clientY - _this.offsetTop;
var diffX = e.clientX - $(_this).parent().get(0).offsetLeft;
var diffY = e.clientY - $(_this).parent().get(0).offsetTop;
//自定义拖拽区域
var flag = false;
for (var i = 0; i < tags[0].length; i ++) {
if (e.target == tags[0].get(i)) {
flag = true;//只要有一个是true，就立刻返回
break;
}
}
if (flag) {
$(document).bind('mousemove',move);
$(document).bind('mouseup',up);
} else {
$(document).unbind('mousemove',move);
$(document).unbind('mousemove',up);
}
function move(e) {
$('div.suspend').css("position", 'absolute');//保证移动div的标题时,div跟着移动
scrollTop22=document.body.scrollTop;
if(isIEtest && scrollTop22==0){//IE中
scrollTop22=document.documentElement.scrollTop;
}
//alert();
var left = e.clientX - diffX;
var old_top = e.clientY - diffY;
var top=old_top+scrollTop22;
//console.log(old_top+"\t"+scrollTop22);
var divWidth22=$(_this).parent().get(0).offsetWidth;//div 的宽度
var screenWidth=document.body.clientWidth;//屏幕宽度,不兼容IE
if(isIEtest ){//IE中,isIEtest的初始化在common_util.js 中
screenWidth=document.documentElement.clientWidth;//屏幕宽度
}
//console.log(left+"\t"+screenWidth);
var rightZero=(screenWidth-divWidth22)-left;
if(rightZero<0)//防止div跑到窗口的右边之外
{
left+=rightZero;
}
if (left < 0) {
left = 0;
}else if(left <= getScroll().left){
left = getScroll().left;
} else if (left > getInner().width + getScroll().left - $(_this).parent().get(0).offsetWidth) {
left = getInner().width + getScroll().left- $(_this).parent().get(0).offsetWidth;
}
if (top < 0) {
top = 0;
}else if(top <= getScroll().top){
top = getScroll().top
} else if (top > getInner().height + getScroll().top - $(_this).parent().get(0).offsetHeight) {
top = getInner().height + getScroll().top - $(_this).parent().get(0).offsetHeight;
}
$(_this).parent().get(0).style.left = left + 'px';
$(_this).parent().get(0).style.top = top + 'px';
//$(_this).parent().get(0).style.bottom= (50+old_top)+ 'px';
if (typeof _this.setCapture != 'undefined') {
_this.setCapture();
}
}
function up(e) {
$('div.suspend').css("position", 'fixed');//保证上下移动滚动条时div保持不变,所以必须恢复为fixed
var event_clientY=e.clientY;
var top =event_clientY - diffY;
var screenHight=document.body.clientHeight;//屏幕高度,不兼容IE
if(isIEtest ){//IE中,isIEtest的初始化在common_util.js 中
screenHight=document.documentElement.clientHeight;//屏幕高度
}
var divHeight22=$(_this).parent().get(0).offsetHeight;//div 的高度
//console.log(event_clientY+"\t "+diffY+"\t"+screenHight+"\t"+divHeight22+"\t"+document.body.scrollTop );
var bottomZero=screenHight-divHeight22+diffY;
//console.log(bottomZero+"\t"+top);
if(event_clientY>bottomZero){//防止div跑到bottom以下,防止div跑出窗口之下
//alert(111);
top-=(event_clientY-bottomZero);
}
if(top<0)//top为负数,就表示div拖拽到窗口之上了
{
top=0;//防止div跑出窗口之上
}
$(_this).parent().get(0).style.top = top + 'px';//解决鼠标松开时位置突变的不正常现象
$(document).unbind('mousemove',move);
$(document).unbind('mouseup',up);
if (typeof _this.releaseCapture != 'undefined') {
_this.releaseCapture();
}
}
});
}
源代码见附件float_suspend.zip
参考:外链网址已屏蔽