<!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. Java学习----方法的覆盖

    方法的覆盖:子类继承父类,子类重写父类的同名方法. 覆盖的原则: 1. 方法的参数必须跟父类保持一致 2. 子类方法的修饰符的范围必须大于等于父类方法同名的修饰符(public > privat ...

  2. bootstrap学习--模态弹出框modals轮子

    1.点击按钮型 <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"> ...

  3. HTML5-黑客帝国2D

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...

  4. Aspnet MVC 异步调用

    一个简图来描述下Aspnet MVC下的异步调用 { request } / \/ -------ISS------- > work thread | \ | \ route - aysn co ...

  5. DDoS攻击

    来自百度百科 分布式拒绝服务攻击编辑 分布式拒绝服务攻击(英文:Distributed Denial of Service,缩写:DDoS)亦称洪水攻击.顾名思义,即是利用网络上已被攻陷的电脑作为“僵 ...

  6. ObjectiveC1基础代码——类和对象

    // //  main.m //  ObjectiveC1 // //  Created by scjy on 15/10/30. //  Copyright © 2015年 lizhipeng. A ...

  7. SQL SERVER CEILING 函数 取整时的坑。。。

    CEILING ---返回大于或等于指定数值表达式的最小整数 当舍去同一个大小的值 但是正负方向不一致时要注意小数位四舍五入的问题   例如: SELECT CEILING($123.45), CEI ...

  8. iOS触摸事件处理--备用

    主要是记录下iOS的界面触摸事件处理机制,然后用一个实例来说明下应用场景. 一.处理机制 界面响应消息机制分两块,(1)首先在视图的层次结构里找到能响应消息的那个视图.(2)然后在找到的视图里处理消息 ...

  9. bzoj1135

    POI阴影又发作了但这道题挺好的,比较涨知识裸的想法是裸的每次二分图匹配,但显然会TLE这里就要引入Hall定理:二分图G中的两部分顶点组成的集合分别为X, Y, X={X1, X2, X3,X4,. ...

  10. 【数论】【扩展欧几里得】Codeforces 710D Two Arithmetic Progressions

    题目链接: http://codeforces.com/problemset/problem/710/D 题目大意: 两个等差数列a1x+b1和a2x+b2,求L到R区间内重叠的点有几个. 0 < ...