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封装了需要被拖拽 ...
随机推荐
- Oracle 面试宝典 - General Questions
转自 http://www.orafaq.com/wiki/Interview_Questions Tell us about yourself/ your background. What are ...
- MySql数据库3【优化3】缓存设置的优化
1.表缓存 相关参数: table_open_cache 指定表缓存的大小.每当MySQL访问一个表时,如果在表缓冲区中还有空间,该表就被打开并放入其中,这样可以更快地访问表内容.通过检查峰值时间的状 ...
- js操作Cookie，实现历史浏览记录
/** * history_teacher.jsp中的js,最近浏览名师 * @version: 1.0 * @author: mingming */ $(function(){ getHistory ...
- jQuery 自动完成文本框
jQuery自动完成插件开源软件 http://www.oschina.net/project/tag/329/jquery-autocomplete jQuery TextExt http://te ...
- instancetype 与 id for Objective-C
instancetype.id.NSObject的区别 - simalone 1.instancetype只能用于方法的返回类型,而id用处和NSObject *类似. 2.instancetyp ...
- jquery $(this).attr $(this).val方法使用介绍--useful
$(this).attr(key); 获取节点属性名的值,相当于getAttribute(key)方法,本文整理了一些相关的示例,感兴趣的朋友可以参考下 $(this).attr(key); 获取节点 ...
- swfobject.js IE兼容问题
错误代码 在562行左右 / add style rule if (ua.ie && ua.win) { if (dynamicStylesheet && typeof ...
- BZOJ 1024 生日快乐
Description windy的生日到了,为了庆祝生日,他的朋友们帮他买了一个边长分别为 X 和 Y 的矩形蛋糕.现在包括windy,一共有 N 个人来分这块大蛋糕,要求每个人必须获得相同面积的蛋 ...
- XML CDATA
/* <![CDATA[ */var mv_dynamic_to_top = {"text":"To Top","version":& ...
- cf C. Fox and Box Accumulation
题意:输入一个n,然后输入n个数,问你可以划分多少个序列,序列为:其中一个数为c,在它的前面最多可以有c个数. 思路:先排序,然后对于每一个数逐步的找没有被用过的数,且这个数可以符合条件,然后如果没有 ...