div拖拽插件——JQ.MoveBox.js（JQ插件学习）

最新推荐文章于 2022-09-05 07:54:06 发布

ft2166826

最新推荐文章于 2022-09-05 07:54:06 发布

阅读量667

点赞数

分类专栏： html/div/css

html/div/css 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

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

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

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

（LYQ：经本人测试此代码真实有效，效果为2款方块，一款出格另一款不出格）

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   //默认不可跑出线外
    }; 
    
})(jQuery);

ft2166826

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div拖拽插件——JQ.MoveBox.js（JQ插件学习）

有一段时间没更新博客了，都不知道忙些什么，学习也没什么进展，惭愧。这一周空闲的时间学着自己写一下JQ插件。以前用原生的JS做过类似拖拽div的效果，现在按原思路改做成一个JQ的小插件，当作制作JQ插件的一个小练习。html为DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w
复制链接

扫一扫