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封装了需要被拖拽 ...
随机推荐
- 基于jQuery选择器的整理集合
jquery对象访问1.each(callback):以每个匹配的元素作为上下文来执行一个函数,return false;停止循环;return true;跳至下一个循环. 来个实例 : 代码如下: ...
- [HttpClient]传递参数
package com.jerry.httpclient; import java.io.UnsupportedEncodingException; import java.util.ArrayLis ...
- python模块之socket
43.python模块之socket: Python在网络通讯方面功能强大,学习一下Socket通讯的基本方式 UDP通讯: Server: import socket port=8081 ...
- asp.net mvc 强类型视图中传入List 数据到控制器
问题来源: 在和一位技术老师聊天时,老师问我一个mvc 表单提交的问题,问道:怎样在表单提交的时候,将 带有 List 属性的对象传入控制器? 这时,我有点呆了,以前一直都好像是 单一属性的表单提交, ...
- org.springframework.web.context.ContextLoaderListener
ContextLoaderListener的作用就是启动Web容器时,自动装配ApplicationContext的配置信息.因为它实现了ServletContextListener这个接口,在web ...
- RR区间锁 不是唯一索引,即使区间内没值,也锁
+--------- +---------------------------------------------------------------------------------------- ...
- 【HDOJ】3345 War Chess
简单BFS.注意最后一组数据,每个初始点不考虑周围是否有敌人. /* 3345 */ #include <iostream> #include <cstdio> #includ ...
- Round Numbers （排列组合）
Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 7558 Accepted: 2596 Description The c ...
- 【转】文件读写NDK(或Linux)
原文网址:http://www.ithao123.cn/content-10709539.html 使用NDK进行文件读写,有利于保存数据的安全性,项目需要,要文件读写从Java中处理搬到Linux平 ...
- 【模拟】NEERC15 A Adjustment Office (2015-2016 ACM-ICPC)(Codeforces GYM 100851)
题目链接: http://codeforces.com/gym/100851 题目大意: 一个N*N的矩阵A,Ai,j=i+j,Q次操作,每次分两种,R r取出第r行还未被取的所有数,并输出和.C c ...