以前用原生的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>
. 代码如下:
(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);
如对本文有疑问， 点击进行留言回复！！
vue脚手架安装以及vue脚手架创建项目（详细步骤），看这篇文章就行了，小白也能创建自己的项目
JavaScript递归函数详解：如何使用递归及简单的递归案例
JavaScript 中的break、continue、return的用法和区别
我要评论
网友评论