先看例子:
http://182.92.97.72/float_suspend/
效果描述:
(1) 鼠标点击"
"即可拖动;
(2)滚动网页的竖直滚动条时,该窗口的位置固定不变;
(3)无论怎么移动,该窗口不会跑到网页可视范围之外
关键code:
Js代码
- // 拖拽效果
- 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
- 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();
- }
- }
- });
- }
