jquery方法+js一般方法+js面向?qū)ο蠓椒▽?shí)現(xiàn)拖拽效果
更新時(shí)間:2012年08月30日 16:46:31 作者:
多種方法制作的div拖拽,簡(jiǎn)單實(shí)用,包括了jquery方法、js一般方法、js面向?qū)ο蠓椒?/div>
<!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=GBK" />
<title>拖拽</title>
<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
#drag{background: #ccc;height: 200px;width: 300px;text-align: center;line-height: 200px;position: absolute;left: 20px;top: 20px;}
</style>
<body>
<div id="drag">
我可以拖動(dòng)哦?。?
</div>
<script type="text/javascript">
//jquery方法拖拽
/**$(function(){
var move = false; //判斷是否被移動(dòng)
var a = 0;
var b = 0;
$("#drag").mousedown(function(event){
move = true;
a = event.pageX - parseInt($("#drag").css("left"));
b = event.pageY - parseInt($("#drag").css("top"));
})
$(document).mousemove(function(event){
if(move){
var x = event.pageX - a;
var y = event.pageY - b;
$("#drag").css({left: x,top: y})
}
}).mouseup(function(){
move = false;
})
})**/
//簡(jiǎn)單的js一般方法
/**var drag = document.getElementById("drag");
var a = 0;
var b = 0;
drag.onmousedown = function(event){
var event = event||window.event;
a = event.clientX-drag.offsetLeft;
b = event.clientY-drag.offsetTop;
drag.onmousemove = function(event){
var event = event||window.event;
var x = event.clientX - a;
var y = event.clientY - b;
drag.style.left = x + "px";
drag.style.top = y + "px";
}
document.onmouseup=function(){
drag.onmousemove = null;
drag.onmouseup = null;
}
}**/
//js面向?qū)ο蠓椒?
function Drag(obj){
this.drag = document.getElementById(obj);
//alert(obj);
this.a = 0;
this.b = 0;
var that = this;
this.drag.onmousedown = function(event){
that.mousedown(event);
}
}
Drag.prototype.mousedown = function(event){
var event = event||window.event;
this.a = event.clientX-this.drag.offsetLeft;
this.b = event.clientY-this.drag.offsetTop;
var that = this;
document.onmousemove=function(event){
that.mousemove(event)
}
document.onmouseup=function(){
that.mouseup()
}
}
Drag.prototype.mousemove = function(event){
var event = event||window.event;
var x = event.clientX - this.a;
var y = event.clientY - this.b;
this.drag.style.left = x + "px";
this.drag.style.top = y + "px";
}
Drag.prototype.mouseup=function(){
document.onmousemove = null;
document.onmouseup = null;
}
new Drag("drag");
</script>
</body>
</html>
復(fù)制代碼 代碼如下:
<!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=GBK" />
<title>拖拽</title>
<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
#drag{background: #ccc;height: 200px;width: 300px;text-align: center;line-height: 200px;position: absolute;left: 20px;top: 20px;}
</style>
<body>
<div id="drag">
我可以拖動(dòng)哦?。?
</div>
<script type="text/javascript">
//jquery方法拖拽
/**$(function(){
var move = false; //判斷是否被移動(dòng)
var a = 0;
var b = 0;
$("#drag").mousedown(function(event){
move = true;
a = event.pageX - parseInt($("#drag").css("left"));
b = event.pageY - parseInt($("#drag").css("top"));
})
$(document).mousemove(function(event){
if(move){
var x = event.pageX - a;
var y = event.pageY - b;
$("#drag").css({left: x,top: y})
}
}).mouseup(function(){
move = false;
})
})**/
//簡(jiǎn)單的js一般方法
/**var drag = document.getElementById("drag");
var a = 0;
var b = 0;
drag.onmousedown = function(event){
var event = event||window.event;
a = event.clientX-drag.offsetLeft;
b = event.clientY-drag.offsetTop;
drag.onmousemove = function(event){
var event = event||window.event;
var x = event.clientX - a;
var y = event.clientY - b;
drag.style.left = x + "px";
drag.style.top = y + "px";
}
document.onmouseup=function(){
drag.onmousemove = null;
drag.onmouseup = null;
}
}**/
//js面向?qū)ο蠓椒?
function Drag(obj){
this.drag = document.getElementById(obj);
//alert(obj);
this.a = 0;
this.b = 0;
var that = this;
this.drag.onmousedown = function(event){
that.mousedown(event);
}
}
Drag.prototype.mousedown = function(event){
var event = event||window.event;
this.a = event.clientX-this.drag.offsetLeft;
this.b = event.clientY-this.drag.offsetTop;
var that = this;
document.onmousemove=function(event){
that.mousemove(event)
}
document.onmouseup=function(){
that.mouseup()
}
}
Drag.prototype.mousemove = function(event){
var event = event||window.event;
var x = event.clientX - this.a;
var y = event.clientY - this.b;
this.drag.style.left = x + "px";
this.drag.style.top = y + "px";
}
Drag.prototype.mouseup=function(){
document.onmousemove = null;
document.onmouseup = null;
}
new Drag("drag");
</script>
</body>
</html>
您可能感興趣的文章:
- javascript面向?qū)ο蟀b類Class封裝類庫(kù)剖析
- Javascript 面向?qū)ο螅ǘ┓庋b代碼
- Javascript 面向?qū)ο缶幊蹋ㄒ唬?封裝
- JS面向?qū)ο缶幊虒?shí)現(xiàn)的拖拽功能案例詳解
- JS基于面向?qū)ο髮?shí)現(xiàn)的拖拽功能示例
- JS實(shí)現(xiàn)鼠標(biāo)按下拖拽效果
- JavaScript鼠標(biāo)拖拽事件詳解
- 純 JS 實(shí)現(xiàn)放大縮小拖拽功能(完整代碼)
- JavaScript實(shí)現(xiàn)圖片的放大縮小及拖拽功能示例
- 詳解JavaScript面向?qū)ο髮?shí)戰(zhàn)之封裝拖拽對(duì)象
相關(guān)文章
JavaScript程序員應(yīng)該知道的45個(gè)實(shí)用技巧
在這篇文章中,我將分享一組JavaScript的技巧、竅門和最佳實(shí)踐,這些都是JavaScript程序員應(yīng)該知曉的,不管他們是使用在瀏覽器/引擎上,還是服務(wù)器端(SSJS——Service Side JavaScript)JavaScript解釋器上2014-03-03js canvas畫布實(shí)現(xiàn)高斯模糊效果
這篇文章主要為大家詳細(xì)介紹了js canvas畫布實(shí)現(xiàn)高斯模糊效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11Code:loadScript( )加載js的功能函數(shù)
Code:loadScript( )加載js的功能函數(shù)...2007-02-02JavaScript暫停和繼續(xù)定時(shí)器的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript暫停和繼續(xù)定時(shí)器的方法的相關(guān)資料,非常不錯(cuò),需要的朋友可以參考下2016-07-07JS 在指定數(shù)組中隨機(jī)取出N個(gè)不重復(fù)的數(shù)據(jù)
這篇文章主要介紹了JS 在指定數(shù)組中隨機(jī)取出N個(gè)不重復(fù)數(shù)據(jù)的方法,需要的朋友可以參考下2014-06-06js的.innerHTML = ""IE9下顯示有錯(cuò)誤的解決方法
js的.innerHTML= "……"在ie9- 的版本顯示不正常,使用jquery可以解決,有類似問(wèn)題的朋友可以參考下2013-09-09