<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>GRAG--彈出框顯示居中並能隨意拖動</title>

<script type="text/javascript" src="jQuery.js"></script>

</head>

<body>

<style type="text/css">

#slideBtn,#dragBox{cursor:pointer;text-align:center;color:#FA0;}

#slideBtn{width:100px; height:24px; line-height:24px; border:#FA0 1px solid; padding:5px 0; margin:10px;}

#dragBox{ width:200px; height:200px;border:#F00 1px solid; background:#999; position:absolute; display:none; z-index:10;font-size:20px; color:#960; line-height:160px;}

#close{ text-align:right;cursor:pointer; margin:5px; height:15px; line-height:15px;}

</style>

<div id="slideBtn">點擊顯示</div>

<div id="dragBox">

    <div id="close" onclick="$('#dragBox').fadeOut();">關閉</div>

    這個是可以拖動的框

</div>

<script type="text/javascript">

var a,

    b,

    c,

    d,

    f,

    g,

    h,

    j = $(window),

    n = $(document).height() - 202,

    o = j.width() - 202,

    p = (j.height() -202) / 2 + j.scrollTop(),

    q = o /2,

    R = $('#dragBox');

$("#slideBtn").click(function(){

    if(R.css('display')=='none'){

        posi();

        R.slideDown();

    }else{

        R.fadeOut();

    }

});

function posi(){

    R.css({'top':p+'px','left':q+'px'});

}

R.mousedown(function(e){

    a = parseInt($(this).css('top'),10);

    b = parseInt($(this).css('left'),10);

    c = a - e.clientY;

    d = b - e.clientX;

    h = true;

})

$(document).mousemove(function(e){

    if(!h){return false;}

    e = e || window.event;

    e.preventDefault();

    e.returnValue=false;

    f = e.clientY +c;

    g = e.clientX +d;

    f = f < 0 ? 0 : (f> n ? n : f);

    g = g < 0 ? 0 : (g> o ? o : g);

    R.css({'top':f+'px','left':g+'px'});

});

$(document).mouseup(function(e){h = false;});

</script>

</body>

</html>

下面是純js實現方式

function $D(id){return document.getElementById(id);}

function BindAsEventListener(object,fun){

    return function(event){

        return fun.call(object,(event || window.event));

    }

}

function Bind(object,fun){

    return function(){

        return fun.apply(object,arguments);

    }

}

function addEvent(target,type,fun){

    if(target.addEventListener){

        target.addEventListener(type,fun,false);

    }else if(target.attachEvent){

        target.attachEvent('on'+type,fun);

    }else{

        target['on'+tyle] = null;

    }

}

function removeEvent(target,type,fun){

    if(target.removeEventListener){

        target.removeEventListener(type,fun,false);

    }else if(target.detachEvent){

        target.detachEvent('on'+type,fun);

    }else{

        target['on'+type] = null;

    }

}

function getStyle(elem,attr){

    if(elem.attr){

        return elem.style[attr];

    }else if(elem.currentStyle){

        return elem.currentStyle[attr];

    }else if(document.defaultView && document.defaultView.getComputedStyle){

        attr=attr.replace(/([A-Z])/g,'-$1').toLowerCase();

        return document.defaultView.getComputedStyle(elem,null).getPropertyValue(attr);

    }else{

        return null;

    }

} 

var Drag = function(){this.init.apply(this, arguments);}

Drag.prototype = {

    init: function(d){

            this.Drag = $D(d);

            this._x = this._y = this._x1 = this._y1 = 0;

            this._dh = document.documentElement.scrollHeight - parseInt(getStyle(this.Drag,'height'),10) - 2;

            this._ww = (window.innerWidth - parseInt(getStyle(this.Drag,'width'),10)) - 2;//2為邊框

        this._fM = BindAsEventListener(this, this.Move);

            this._fS = Bind(this,this.Stop);

            this.Drag.style.position = 'absolute';

            addEvent(this.Drag, 'mousedown', BindAsEventListener(this,this.Star));

    },

    Star: function(e){

            this._x = e.clientX - this.Drag.offsetLeft;

            this._y = e.clientY - this.Drag.offsetTop;

            addEvent(document, 'mousemove', this._fM);

            addEvent(document, 'mouseup', this._fS);

    },

    Move: function(e){

            this.Rang(e.clientX - this._x,e.clientY - this._y);

            this.Drag.style.left = this._x1 + 'px';

            this.Drag.style.top = this._y1 + 'px';

    },

    Stop: function(e){

            removeEvent(document, 'mousemove', this._fM);

            removeEvent(document, 'mouseup', this._fS);

    },

    Rang: function(x,y){

            this._x1 = x < 0 ? 0 : ( x > this._ww ? this._ww : x );

            this._y1 = y < 0 ? 0 : ( y > this._dh ? this._dh : y );

    }

};

new Drag('dragBox');

javascript 鼠標拖動功能的更多相关文章

  1. (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能

    利用JavaScript(JS)实现一个九宫格拖拽功能   Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...

  2. Js元素拖拽功能实现

    Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...

  3. js实现登陆页面的拖拽功能

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>登 ...

  4. JQuery UI的拖拽功能

    JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...

  5. JQuery UI的拖拽功能实现方法小结

    JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念 ...

  6. js进阶 12-17 jquery实现鼠标左键按下拖拽功能

    js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...

  7. day25—JavaScript实现文件拖拽上传案例实践

    转行学开发,代码100天——2018-04-10 今天记录一个利用JavaScript实现文件拖拽上传到浏览器,后天将文件打开的小案例. 基本功能:1点击添加文件 2 文件拖拽添加 html: < ...

  8. JavaScript confirm 自定义风格及功能实现

    在网上找了一些弹窗插件,例如bootbox, 功能和动画效果都做的很好,但是很难自定义样式. 项目需要,Google相关方法后写了一个Demo, 没有JavaScript confirm切断线程的功能 ...

  9. RCP：拖拽功能的实现 Drag and Drop

    SWT中的拖拽是使用的org.eclipse.swt.dnd. 有三个需要密切注意的类: 1.DragSource 2.DropTarget 3.Transfer DragSource封装了需要被拖拽 ...

随机推荐

  1. SQL 结构化查询语言

    SQL 结构化查询语言 一.数据库的必要性: >>作用:存储数据.检索数据.生成新的数据 1)可以有效结构化存储大量的数据信息,方便用户进行有效的检索和访问. 2)可以有效地保持数据信息的 ...

  2. 我的css reset

    @charset "utf-8"; /*reset*/ body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,f ...

  3. yii2源码学习笔记(六）

    Behvaior类,Behavior类是所有事件类的基类: 目录yii2\base\Behavior.php <?php /** * @link http://www.yiiframework. ...

  4. Android LinearLayout中weight属性的意义与使用方式

    layout_weight 分割父级容器的比例

  5. CSS3 box-shadow(阴影使用)

    from: http://jingyan.baidu.com/article/03b2f78c4d9fae5ea237aea6.html css3 box-shadow 内阴影与外阴影 1- box- ...

  6. centos升级python到2.7

    最近在阿里云租了一个云主机,打算部署自己的个人网站,但是centos系统的默认Python是2.6版本,打算升级到2.7.3! 查看python的版本 #python  -V Python 2.6.6 ...

  7. STM32学习笔记——SPI串行通讯（向原子哥学习）

    一.SPI  简介 SPI是 Serial Peripheral interface 的缩写,就是串行外围设备接口.SPI 接口主要应用在  EEPROM, FLASH,实时时钟,AD 转换器,还有数 ...

  8. shuffle机制和TextInputFormat分片和读取分片数据(九)

    shuffle机制 1:每个map有一个环形内存缓冲区,用于存储任务的输出.默认大小100MB(io.sort.mb属性),一旦达到阀值0.8(io.sort.spill.percent),一个后台线 ...

  9. CodeChef FNCS

    题面:https://www.codechef.com/problems/FNCS 题解: 我们考虑对 n 个函数进行分块,设块的大小为S. 每个块内我们维护当前其所有函数值的和,以及数组中每个元素对 ...

  10. while死循环问题-输入字符就会死循环

    问题: 是否会遇到这样的问题,在while循环中 sanf("%d",&a);如果输入的不是数字,是字符就会进入死循环. 解决方案:都是缓冲区惹的祸,输入字符后,字符会一直 ...