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封装了需要被拖拽 ...
随机推荐
- phpcms v9后台美化需要修改的部分整理
PHPcms后台登陆后的页面修改 Phpcms->modules->admin->templates->main.tpl.php 1,安全提示部分 <h6>< ...
- SAE flask及其扩展 bug指南
1. ImportError: No moudle named ext.bootstrap 导入依赖包失败 SAE会提供一种机制通过导入virtualenv.bundle来解决 此处有坑:官网文档中说 ...
- F题 - A+B for Input-Output Practice (V)
Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Description You ...
- objective-c（初始化）
objective-c(初始化) 创建对象 (编程语言 Objective-C 2.0) 1.类对象与实例化 类的定义完成后,编译器在内存中自动生成唯一的类对象,实例对象都是通过调用类对象的类方法生成 ...
- 转:php使用websocket示例详解
原文来自于:http://www.jb51.net/article/48019.htm 这篇文章主要介绍了php使用websocket示例,需要的朋友可以参考下 下面我画了一个图演示 client ...
- BZOJ 1200 木梳
Description Input 第一行为整数L,其中4≤L≤100000,且有50%的数据满足L≤104,表示木板下侧直线段的长.第二行为L个正整数A1,A2,…,AL,其中Ai≤108 Outp ...
- 从VC到g++遇到的事
最近做的项目,需要把代码从VC移植到g++下编译,在这个过程中,遇到了几个平台相关的问题--在VC下顺利编译的代码,但在g++中编译报错. 这里贴出来给大家分享一下: 1. 枚举类型 问题代码 enu ...
- Struts2再爆远程代码执行漏洞
Struts又爆远程代码执行漏洞!在这次的漏洞中,攻击者可以通过操纵参数远程执行恶意代码.Struts 2.3.15.1之前的版本,参数action的值redirect以及redirectAction ...
- 数据结构（堆）：SCOI 2009 生日礼物
Description 小西有一条很长的彩带,彩带上挂着各式各样的彩珠.已知彩 珠有N个,分为K种.简单的说,可以将彩带考虑为x轴,每一个彩珠有一个对应的坐标(即位置).某些坐标上可以没有彩珠,但多个 ...
- 贪心(数据结构)：COGS 468. [NOI2010]超级钢琴
★★★☆ 输入文件:piano.in 输出文件:piano.out 简单对比 时间限制:2 s 内存限制:512 MB 超级钢琴 [问题描述] 小Z是一个小有名气的钢琴家,最近C博士送 ...