先看例子:
http://182.92.97.72/float_suspend/
效果描述:
(1) 鼠标点击"
"即可拖动;
(2)滚动网页的竖直滚动条时,该窗口的位置固定不变;
(3)无论怎么移动,该窗口不会跑到网页可视范围之外
关键code:
// 拖拽效果
function drag(){
var tags = arguments;
// alert(tags[0].length);//长度为4
for(var i=0;i<tags[0].length;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
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();
});
}