基于jquery的可吸附栅格拖拽插件！

个人github地址（不定期更新更多实用组件）：https://github.com/pomelott

博客园地址：http://www.cnblogs.com/pomelott

几天在项目中遇到一个效果，需要将某结点拖拽后实时放置在离自己位置最近的栅格中。这么好的案例，不封装还是人吗？好了，不扯了，先上配置参数：

        this.set={
            boxNode:"#box", //拖拽区域盒子结点，传ID,默认为#box
            dragNode:"#drag",//拖拽结点，传ID,默认为#drag
            blockW:150,   //拖拽结点的宽度，单位为像素，默认为150
            blockH:100,    //拖拽结点的高度，单位为像素，默认为100
            block:"(5,5)",    //栅格的排数和列数(排数,列数)，默认为(5,5)
            startPos:"(1,1)"   //拖拽结点的起始位置，例如(3,5)为第三排第五列,默认为(1,1)
        }

在上效果图：

html如下：

    <div id="box">
        <div class="drag" id="drag">drag</div>
    </div>

css如下：

    *{
        padding: 0;
        margin: 0;
    }
    #box{
        height:800px;
        
        position: relative;
        left: 50px;
        top: 50px;
    }
    #box:after{
        content:".";
        font-size: 0px;
        display: block;
        visibility: none;
        clear: both;
        height: 0;
    }
    .drag{
        width: 100%;
        height: 100%;
        color: #fff;
        cursor: pointer;
        background: #333;
    }

    #box .block{
        float: left;
        outline: 1px solid #dfdfdf;
    }

blockDrag.js如下：

    function blockDrag(obj){
        this.set={
            boxNode:"#box", //拖拽区域盒子结点，传ID,默认为#box
            dragNode:"#drag",//拖拽结点，传ID,默认为#drag
            blockW:150,   //拖拽结点的宽度，单位为像素，默认为150
            blockH:100,    //拖拽结点的高度，单位为像素，默认为100
            block:"(5,5)",    //栅格的排数和列数(排数,列数)，默认为(5,5)
            startPos:"(1,1)"   //拖拽结点的起始位置，例如(3,5)为第三排第五列,默认为(1,1)
        }
        jQuery.extend(this.set,obj);
        this.startX=this.set.startPos.substring(3,4);
        this.startY=this.set.startPos.substring(1,2);
        this.row=this.set.block.substring(1,2);
        this.col=this.set.block.substring(3,4);
        if(this.startY>this.row||this.startX>this.col){
            this.startX=1;
            this.startY=1;
        }
        this.dragId=this.set.dragNode.substring(1,this.set.dragNode.length);
        this.wrapId=this.dragId+"Wrap";
        this.wrapNode="#"+this.wrapId;
        var _this=this;
        $(this.set.dragNode).wrap("<div id='"+this.wrapId+"'></div>");
        $(this.wrapNode).css({"width":this.set.blockW+"px","height":this.set.blockH+"px","position":"absolute","top":(this.startY-1)*this.set.blockH+"px","left":(this.startX-1)*this.set.blockW+"px"});
        $(this.set.boxNode).css({"width":this.col*this.set.blockW+"px","height":this.row*this.set.blockH+"px"});
        $(this.wrapNode).mousedown(function(event){
            var boxX=parseInt($(this).css("left"));
            var boxY=parseInt($(this).css("top"));
            var startX=event.pageX;
            var startY=event.pageY;
            event.stopPropagation();
            _this.moveFn=function(event){
                var nowX=event.pageX;
                var nowY=event.pageY;        
                $(_this.wrapNode).css({"left":(boxX+nowX-startX)+"px","top":(boxY+nowY-startY)+"px"})
            }
            $(document).on("mousemove",_this.moveFn)
            if($(_this.wrapNode).get(0).setCapture){
              $(_this.wrapNode).get(0).setCapture();
            }
            $(document).mouseup(function(event){
                  var nowL=parseInt($(_this.wrapNode).css("left"));
                  var nowT=parseInt($(_this.wrapNode).css("top"));
                  var averW=_this.set.blockW/2;
                  var averH=_this.set.blockH/2;
                  var lResult=parseInt(nowL/averW);
                  var tResult=parseInt(nowT/averH);
                  lResult<0?lResult=0:null;
                  tResult<0?tResult=0:null;
                  lResult>(_this.col-1)*2?lResult=(_this.col-1)*2:null;
                  tResult>(_this.row-1)*2?tResult=(_this.row-1)*2:null;
                  if(lResult%2==0){
                      $(_this.wrapNode).animate({"left":(((lResult+2)/2)-1)*_this.set.blockW+"px"},50);
                  }
                  else{
                      $(_this.wrapNode).animate({"left":(((lResult+3)/2)-1)*_this.set.blockW+"px"},50);
                  }
                  if(tResult%2==0){
                      $(_this.wrapNode).animate({"top":(((tResult+2)/2)-1)*_this.set.blockH+"px"},50);
                  }
                  else{
                      $(_this.wrapNode).animate({"top":(((tResult+3)/2)-1)*_this.set.blockH+"px"},50);
                  }
                $(document).off("mousemove").off("mouseup");
                $(_this.wrapNode).off("mouseup");
            }) 
        })
        if($(_this.wrapNode).get(0).releaseCapture){
              $(_this.wrapNode).get(0).releaseCapture();
        }
        return false;
    }

调用代码：（背景栅格可根据实际项目需要决定是否添加）

//初始化对象
  var demo=new blockDrag({block:"(6,8)"});
//设置背景栅格，可根据需要添加
 var blockNum=Number(demo.col)*Number(demo.row);
 for(var i=0;i<blockNum;i++){
     $("<div class='block' style='width:"+demo.set.blockW+"px;height:"+demo.set.blockH+"px'></div>").appendTo($("#box"));
 }

最后附上全部html源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    #box{
        height:800px;
        
        position: relative;
        left: 50px;
        top: 50px;
    }
    #box:after{
        content:".";
        font-size: 0px;
        display: block;
        visibility: none;
        clear: both;
        height: 0;
    }
    .drag{
        width: 100%;
        height: 100%;
        color: #fff;
        cursor: pointer;
        background: #333;
    }

    #box .block{
        float: left;
        outline: 1px solid #dfdfdf;
    }
    </style>

</head>
<body style="height:3000px;">
    <div id="box">
        <div class="drag" id="drag">drag</div>
    </div>
    <script type="text/javascript" src="js/jquery-1.8.min.js"></script>
    <script type="text/javascript" src="js/blockDrag.min.js"></script>
    <script type="text/javascript">
//初始化对象
  var demo=new blockDrag({block:"(6,8)"});
//设置背景栅格，可根据需要添加
 var blockNum=Number(demo.col)*Number(demo.row);
 for(var i=0;i<blockNum;i++){
     $("<div class='block' style='width:"+demo.set.blockW+"px;height:"+demo.set.blockH+"px'></div>").appendTo($("#box"));
 }


    </script>
</body>
</html>