javascript 鼠標拖動功能
<!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 鼠標拖動功能的更多相关文章
- (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能
利用JavaScript(JS)实现一个九宫格拖拽功能 Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...
- Js元素拖拽功能实现
Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...
- js实现登陆页面的拖拽功能
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>登 ...
- JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...
- JQuery UI的拖拽功能实现方法小结
JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念 ...
- js进阶 12-17 jquery实现鼠标左键按下拖拽功能
js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...
- day25—JavaScript实现文件拖拽上传案例实践
转行学开发,代码100天——2018-04-10 今天记录一个利用JavaScript实现文件拖拽上传到浏览器,后天将文件打开的小案例. 基本功能:1点击添加文件 2 文件拖拽添加 html: < ...
- JavaScript confirm 自定义风格及功能实现
在网上找了一些弹窗插件,例如bootbox, 功能和动画效果都做的很好,但是很难自定义样式. 项目需要,Google相关方法后写了一个Demo, 没有JavaScript confirm切断线程的功能 ...
- RCP：拖拽功能的实现 Drag and Drop
SWT中的拖拽是使用的org.eclipse.swt.dnd. 有三个需要密切注意的类: 1.DragSource 2.DropTarget 3.Transfer DragSource封装了需要被拖拽 ...
随机推荐
- form WebBrowser自动点击弹出提示框alert、弹出对话框confirm、屏蔽弹出框、屏蔽弹出脚本错误的解决办法
针对WebBrowser控件中自动点击弹出框及禁用脚本提示问题得到如下几种实际情况的解决办法,绝对管用. 1.屏蔽弹出错误脚本 将WebBrowser控件ScriptErrorsSuppressed设 ...
- C++ 类的前向声明
前向声明 在计算机程序设计中, 前向声明是指声明标识符(表示编程的实体,如数据类型.变量.函数)时还没有给出完整的定义.即可以声明一个类而不定义它,只声明类但不知道类的成员变量.函数等具体细节. 如: ...
- java-web-j2e学习建议路线
JAVA学习之路(2) 首先要明白Java体系设计到得三个方面:J2SE,J2EE,J2ME(KJAVA).J2SE,Java 2 Platform Standard Edition,我们经常说 ...
- Google测试精华文章(1) - 测试行为，而非实现
Your trusty Calculator class is one of your most popular open source projects, with many happy users ...
- 在VS2008.Net下使用WPF开发Web应用程序
原文地址:http://hankjin.blog.163.com/blog/static/33731937200922353623434/ 胖客户端的好处是可以轻易的实现绚丽的效果, 而瘦客户端则需要 ...
- MATLAB中多行注释的三种方法
MATLAB中多行注释的三种方法 A. %{ 若干语句 %} B. 多行注释: 选中要注释的若干语句, 编辑器菜单Text->Comment, 或者快捷键Ctrl+R 取消注释: 选中要取消注释 ...
- 详解SSH注解配置，bean注解、事物注解等
使用过SSH注解的屌丝们都知道,要想使用注解需要在applicationContext.xml配置文件里面开启注解配置,开启方式如下:1.头部声明需加入xmlns:context="http ...
- (step4.3.8)hdu 2181(哈密顿绕行世界问题——DFS)
题目大意:通俗点讲就是,输出所有从m城市出发,便利所有城市之后又能回到m城市的序列...... 解题思路:DFS 1)用map[][]来存储城市之间的连通情况.用used[]存储某个城市的使用情况(即 ...
- chage命令管理用户口令时效
http://zhumeng8337797.blog.163.com/blog/static/1007689142011824102827487/ http://www.th7.cn/system/l ...
- Flesch Reading Ease(模拟)
http://poj.org/problem?id=3371 终于遇到简单一点的模拟题了.不过本人真心没有耐心读题目... 它的大致意思就是给一段合法的文章,求出这段文章的单词数,句子数,音节数,按照 ...