html5 div拖拽插件,div拖拽插件——JQ.MoveBox.js(自制JQ插件)

有一段时间没更新博客了，都不知道忙些什么，学习也没什么进展，惭愧。

这一周空闲的时间学着自己写一下JQ插件。

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

html为

*{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;}

$(".float-box").MoveBox();

$(".float-box1").MoveBox({out:true});

下面为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

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

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);