div拖拽插件——JQ.MoveBox.js(自制JQ插件)
更新時(shí)間:2013年05月17日 17:26:44 作者:
以前用原生的JS做過類似拖拽div的效果,現(xiàn)在按原思路改做成一個(gè)JQ的小插件,當(dāng)作制作JQ插件的一個(gè)小練習(xí),感興趣的朋友可以了解下哈
有一段時(shí)間沒更新博客了,都不知道忙些什么,學(xué)習(xí)也沒什么進(jìn)展,慚愧。
這一周空閑的時(shí)間學(xué)著自己寫一下JQ插件。
以前用原生的JS做過類似拖拽div的效果,現(xiàn)在按原思路改做成一個(gè)JQ的小插件,當(dāng)作制作JQ插件的一個(gè)小練習(xí)。
html為
<!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=gb2312" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
#box{width:500px;height:500px;margin:200px auto;position:relative;border:1px solid #ccc;border-left:2px solid #ccc;}
.float-box{width:100px;height:100px;background:#000;color:#fff;position:absolute;top:20px;left:10px;cursor:move;z-index:2;border:2px solid #ccc;border-right:10px solid #fc0;}
.float-box1{width:200px;height:200px;background:#f30;color:#fff;position:absolute;top:0;left:200px;cursor:move;border-top:10px solid #000;}
</style>
</head>
<body>
<div id="box">
<div class="float-box"></div>
<div class="float-box1"></div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="JQ.MoveBox.js"></script>
<script type="text/javascript">
$(".float-box").MoveBox();
$(".float-box1").MoveBox({out:true});
</script>
</body>
</html>
下面為JQ.MoveBox.js
(function($){
var n = 1;
var o = {}
$.fn.MoveBox=function(options){
var opts = $.extend({}, $.fn.MoveBox.defaults, options);
return this.each(function(i){
$(this).mousedown(function(e){
o.iTop = $(this).position().top - e.pageY;
o.iLeft = $(this).position().left - e.pageX;
n++;
$this = $(this);
$this.css({'z-index':n});
$(document).bind("mousemove",function(e){
var iLeft = e.pageX + o.iLeft;
var iTop = e.pageY + o.iTop;
if(opts.out){
if(iLeft<-$this.parent().offset().left-parseInt($this.parent().css("border-left-width"))){
iLeft = -$this.parent().offset().left-parseInt($this.parent().css("border-left-width"));
}else if(iLeft>$(document).width()-$this.width()-parseInt($this.css("border-left-width"))-parseInt($this.css("border-right-width"))-$this.parent().offset().left-parseInt($this.parent().css("border-left-width"))){
iLeft = $(document).width()-$this.width()-parseInt($this.css("border-left-width"))-parseInt($this.css("border-right-width"))-$this.parent().offset().left-parseInt($this.parent().css("border-left-width"));
}
if(iTop<-$this.parent().offset().top-parseInt($this.parent().css("border-top-width"))+$(document).scrollTop()){
iTop = -$this.parent().offset().top-parseInt($this.parent().css("border-top-width"))+$(document).scrollTop();
}else if(iTop>$(window).height()+$(document).scrollTop()-$this.height()-parseInt($this.css("border-top-width"))-parseInt($this.css("border-bottom-width"))-$this.parent().offset().top-parseInt($this.parent().css("border-top-width"))){
iTop = $(window).height()+$(document).scrollTop()-$this.height()-parseInt($this.css("border-top-width"))-parseInt($this.css("border-bottom-width"))-$this.parent().offset().top-parseInt($this.parent().css("border-top-width"));
}
}else{
if(iLeft<0){
iLeft = 0;
}else if(iLeft>$this.parent().width()-$this.width()-parseInt($this.css("border-left-width"))-parseInt($this.css("border-right-width"))){
iLeft = $this.parent().width()-$this.width()-parseInt($this.css("border-left-width"))-parseInt($this.css("border-right-width"));
}
if(iTop<0){
iTop = 0;
}else if(iTop>$this.parent().height()-$this.height()-parseInt($this.css("border-top-width"))-parseInt($this.css("border-bottom-width"))){
iTop = $this.parent().height()-$this.height()-parseInt($this.css("border-top-width"))-parseInt($this.css("border-bottom-width"));
}
}
$this.css({
'left':iLeft +"px",
'top':iTop + "px"
})
});
$(document).bind("mouseup",function(){
$(document).unbind("mousemove");
$(document).unbind("mouseup");
});
});
});
};
$.fn.MoveBox.defaults = {
out:false //默認(rèn)不可跑出線外
};
})(jQuery);
這一周空閑的時(shí)間學(xué)著自己寫一下JQ插件。
以前用原生的JS做過類似拖拽div的效果,現(xiàn)在按原思路改做成一個(gè)JQ的小插件,當(dāng)作制作JQ插件的一個(gè)小練習(xí)。
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=gb2312" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
#box{width:500px;height:500px;margin:200px auto;position:relative;border:1px solid #ccc;border-left:2px solid #ccc;}
.float-box{width:100px;height:100px;background:#000;color:#fff;position:absolute;top:20px;left:10px;cursor:move;z-index:2;border:2px solid #ccc;border-right:10px solid #fc0;}
.float-box1{width:200px;height:200px;background:#f30;color:#fff;position:absolute;top:0;left:200px;cursor:move;border-top:10px solid #000;}
</style>
</head>
<body>
<div id="box">
<div class="float-box"></div>
<div class="float-box1"></div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="JQ.MoveBox.js"></script>
<script type="text/javascript">
$(".float-box").MoveBox();
$(".float-box1").MoveBox({out:true});
</script>
</body>
</html>
下面為JQ.MoveBox.js
復(fù)制代碼 代碼如下:
(function($){
var n = 1;
var o = {}
$.fn.MoveBox=function(options){
var opts = $.extend({}, $.fn.MoveBox.defaults, options);
return this.each(function(i){
$(this).mousedown(function(e){
o.iTop = $(this).position().top - e.pageY;
o.iLeft = $(this).position().left - e.pageX;
n++;
$this = $(this);
$this.css({'z-index':n});
$(document).bind("mousemove",function(e){
var iLeft = e.pageX + o.iLeft;
var iTop = e.pageY + o.iTop;
if(opts.out){
if(iLeft<-$this.parent().offset().left-parseInt($this.parent().css("border-left-width"))){
iLeft = -$this.parent().offset().left-parseInt($this.parent().css("border-left-width"));
}else if(iLeft>$(document).width()-$this.width()-parseInt($this.css("border-left-width"))-parseInt($this.css("border-right-width"))-$this.parent().offset().left-parseInt($this.parent().css("border-left-width"))){
iLeft = $(document).width()-$this.width()-parseInt($this.css("border-left-width"))-parseInt($this.css("border-right-width"))-$this.parent().offset().left-parseInt($this.parent().css("border-left-width"));
}
if(iTop<-$this.parent().offset().top-parseInt($this.parent().css("border-top-width"))+$(document).scrollTop()){
iTop = -$this.parent().offset().top-parseInt($this.parent().css("border-top-width"))+$(document).scrollTop();
}else if(iTop>$(window).height()+$(document).scrollTop()-$this.height()-parseInt($this.css("border-top-width"))-parseInt($this.css("border-bottom-width"))-$this.parent().offset().top-parseInt($this.parent().css("border-top-width"))){
iTop = $(window).height()+$(document).scrollTop()-$this.height()-parseInt($this.css("border-top-width"))-parseInt($this.css("border-bottom-width"))-$this.parent().offset().top-parseInt($this.parent().css("border-top-width"));
}
}else{
if(iLeft<0){
iLeft = 0;
}else if(iLeft>$this.parent().width()-$this.width()-parseInt($this.css("border-left-width"))-parseInt($this.css("border-right-width"))){
iLeft = $this.parent().width()-$this.width()-parseInt($this.css("border-left-width"))-parseInt($this.css("border-right-width"));
}
if(iTop<0){
iTop = 0;
}else if(iTop>$this.parent().height()-$this.height()-parseInt($this.css("border-top-width"))-parseInt($this.css("border-bottom-width"))){
iTop = $this.parent().height()-$this.height()-parseInt($this.css("border-top-width"))-parseInt($this.css("border-bottom-width"));
}
}
$this.css({
'left':iLeft +"px",
'top':iTop + "px"
})
});
$(document).bind("mouseup",function(){
$(document).unbind("mousemove");
$(document).unbind("mouseup");
});
});
});
};
$.fn.MoveBox.defaults = {
out:false //默認(rèn)不可跑出線外
};
})(jQuery);
相關(guān)文章
jQuery學(xué)習(xí)總結(jié)之jQuery事件
今天總結(jié)一下jQuery事件,這是比較重要的一塊,希望本次總結(jié)能幫助到很多同我一樣的新手2014-06-06jquery實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建form并提交的方法示例
這篇文章主要介紹了jquery實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建form并提交的方法,結(jié)合實(shí)例形式分析了jQuery form表單創(chuàng)建與提交相關(guān)操作技巧,需要的朋友可以參考下2019-05-05jquery.form.js實(shí)現(xiàn)將form提交轉(zhuǎn)為ajax方式提交的方法
這篇文章主要介紹了jquery.form.js實(shí)現(xiàn)將form提交轉(zhuǎn)為ajax方式提交的方法,涉及jQuery插件實(shí)現(xiàn)form表單的Ajax提交技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04jquery radio的取值_radio的選中_radio的重置方法
下面小編就為大家?guī)硪黄猨query radio的取值_radio的選中_radio的重置方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax輔助方法
我們都知道在AjaxPro的方法AjaxPro.Utility.RegisterTypeForAjax(typeof(所在類的類名));會(huì)將標(biāo)記有[Ajax.AjaxMethod]方法注冊在客戶端。2011-09-09