摘要:以前用原生的JS做过类似拖拽p的效果,现在按原思路改做成一个JQ的小插件,当作制作JQ插件的一个小练习。 html为

脚本宝典收集整理的这篇文章主要介绍了

js实例教程-div拖拽插件――JQ.MoveBox.js(自制JQ插件)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

以前用原生的JS做过类似拖拽p的效果,现在按原思路改做成一个JQ的小插件,当作制作JQ插件的一个小练习。
html为

. 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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>
<p id="box">
<p class="float-box"></p>
<p class="float-box1"></p>
</p>
<script type="text/javascript" src="https://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 //默认不可跑出线外
};
})(jQuery);

以前用原生的JS做过类似拖拽p的效果,现在按原思路改做成一个JQ的小插件,当作制作JQ插件的一个小练习。
html为

. 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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>
<p id="box">
<p class="float-box"></p>
<p class="float-box1"></p>
</p>
<script type="text/javascript" src="https://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 //默认不可跑出线外
};
})(jQuery);

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

js实例教程-div拖拽插件――JQ.MoveBox.js(自制JQ插件)

全部内容,希望文章能够帮你解决

js实例教程-div拖拽插件――JQ.MoveBox.js(自制JQ插件)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过