jquery拖动div

=============================================================== //复制拖动(helper)

    
    
    
    
    //复制拖动

        $(function () {
            $("#resource").draggable({
                helper: "clone"
            });


            $("#targer").droppable({
                drop: function (event, ui) {//把源div放在容器中时触发
                    var div = $("#resource").clone(false); //复制div
                    div.css({"top":ui.offset.top+"px","left":ui.offset.left+"px"});//设置坐标
                    $(this).append(div);//在容器中添加div
                }
            });
        });


    


    

    



    
        
    
    

=============================================================== //拖动方向控制(axis)

    
    
    
    
        $(function () {
        //拖动方向控制
            $("#resouce").draggable({
                //axis: "x"//限制x轴移动
                axis: "y"//限制y轴移动
            });
        });
    


    

    

=============================================================== //拖动范围控制(containment)

    
    
    
    
    //拖动范围控制
        $(function () {
            $("#resource").draggable({
            //containment: $("#targer")     第一种方式
            // containment:"parent"         第二种方式
            containment:[0,0,300,200]     //第三种方式
            });
        });
    


    
   
   
   div>

=============================================================== //拖动吸附(snap,grid)

    
      



    $(function () {
        //拖动吸附
        $("#source1").draggable({
            snap:true
        });

        $("#source2").draggable({
            snap: "#targer"
        });

        $("#source3").draggable({
            grid: [50,50]
        });

    });




容器

吸附到可拖动div

吸附到容器

吸附到网格

  

=============================================================== //拖动div手柄（handle）

    
    
    
    
        $(function () {
            //拖动div手柄
            $("#resource").draggable({
                handle:$(".p")
            });
        });