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封装了需要被拖拽 ...
随机推荐
- centos lnmp 安装笔记
[root@host]# chkconfig nginx on [root@host]# service nginx start [root@host]# service nginx stop [ro ...
- 极简主义，对逻辑操作符||和&&深度运用的理解
丧心病狂的代码压缩好像违背了愉快阅读的本真,所以刨根问底想要了解个究竟,最后发现这不只是前端大牛装逼卖萌的绝技,也是代码洁癖爱好者的利器,毕竟这样看上去确实蛮优雅的; 一开始,我们接触到的代码是这样的 ...
- Java初试
另外在Java语言的代码内部书写文件路径时,需要注意大小写,大小写需要保持一致,路径中的文件夹名称区分大小写.由于’\’是Java语言中的特殊字符,所以在代码内部书写文件路径时,例如代表“c:\tes ...
- 基于cx_freeze编译PyQt4程序(numpy & scipy)
当开发完成PyQt4程序后,需要提供给他人使用,这时最好的办法是将Python程序编译成exe文件. 通常我采用cx_freeze完成这个工作,即编写setup.py文件,执行python setup ...
- ipython与python的区别
http://mba.shengwushibie.com/itbook/BookChapter.asp?id=8745 http://www.cnblogs.com/yangze/archive/20 ...
- Can deep learning help you find the perfect girl?
Can deep learning help you find the perfect girl? One of the first things I did when I moved to Mont ...
- Java Socket Example
1.服务端:server package com.socket; import java.io.BufferedReader; import java.io.IOException; import j ...
- 一篇故事讲述了计算机网络里的基本概念：网关，DHCP，IP寻址，ARP欺骗，路由，DDOS等...
计算机主机网关的作用是什么? 假设你的名字叫小不点,你住在一个大院子里,你的邻居有很多小伙伴,在门口传达室还有个看大门的李大爷,李大爷就是你的网关.当你想跟院子里的某个小伙伴玩,只要你在院子里大喊一声 ...
- 【转】java中float与byte[]的互转 -- 不错
原文网址:http://tjmljw.iteye.com/blog/1767716 起因:想把一个float[]转换成内存数据,查了一下,下面两个方法可以将float转成byte[]. 方法一 imp ...
- 【动态规划】【最短路】Codeforces 710E Generate a String
题目链接: http://codeforces.com/problemset/problem/710/E 题目大意: 问写N个字符的最小花费,写一个字符或者删除一个字符花费A,将当前的字符数量翻倍花费 ...