<!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. windows7 64 位 mysql 5.6.12 安装

    1.修改 my-default.ini 改名为 my.ini 内容修改为 [mysqld] loose-default-character-set = utf8    basedir = D:/mys ...

  2. sencha touch中用来格式化日期的字符串参数

  3. 高德地图关键字搜索删除上一次搜索的Marker

    方法:Marker类的  setMap(null);方法 高德是通过循环调用addmarker(i,d)方法  创建marker标记,所以我们需要 把创建的marker标记压入到一个数组,再第二次搜索 ...

  4. 【算法】简单选择排序 O(n^2) 不稳定的 C语言

    简单选择排序 一.算法描述 假设序列中有N个元素: 第1趟找到第1到N个元素之间最小的一个,与第1个元素进行交换 第2趟找到第2到N个元素之间最小的一个,与第2个元素进行交换 第3趟找到第3到N个元素 ...

  5. EJB

    Enterprise JavaBean,企业级javabean,是J2EE的一部分,定义了一个用于   开发基于组件的企业多重应用程序的标准.其特点包括网络服务支持和核心开发工具(SDK). 是Jav ...

  6. 检查网口流量与前10名流量大IP

    此脚本包含的功能有: 1.实时监控任意网卡的流量 2.统计10秒内平均流量 3.统计每个端口在10秒内的平均流量,基于客户端和服务端端口统计.可以看出哪些端口占流量比较大,对于web服务器,一般是80 ...

  7. C#程序设计基础——运算符与表达式

    运算符就是完成操作的一系列符号,它主要包括算术运算符.赋值运算符.关系运算符.逻辑运算符.条件运算.位操作运算符和字符串运算符. 表达式就是运算符和操作数的组合,如a*b+1-c.表达式主要包括算术表 ...

  8. I2C的主机从机模拟

    好久没有在csdn上面做笔记了,主要是最近琐碎的事情太多,乱七八糟的事情让自己不能坚定下来做自己喜欢做的事情.上了星期花了两天的时间模拟了I2C的主机和从机通信.一般都是主机模拟,从机直接用硬件I2C ...

  9. 使用 Spring Data JPA 简化 JPA 开发

    从一个简单的 JPA 示例开始 本文主要讲述 Spring Data JPA,但是为了不至于给 JPA 和 Spring 的初学者造成较大的学习曲线,我们首先从 JPA 开始,简单介绍一个 JPA 示 ...

  10. JDK安装配置与升级

    一.jdk1.4卸载 Redhat Enterprise 5 中自带安装了jdk1.4,在安装jdk1.6前,把jdk1.4卸载: 1. 首先查看系统自带的JDK版本: [root@linux ~]# ...