Tel：028-86922220 我有需求

jquery拖动div

*jquery库去我的下载里面下载

成都创新互联公司是网站建设专家,致力于互联网品牌建设与网络营销，专业领域包括成都网站建设、成都做网站、电商网站制作开发、小程序开发、微信营销、系统平台开发，与其他网站设计及系统开发公司不同，我们的整合解决方案结合了恒基网络品牌建设经验和互联网整合营销的理念，并将策略和执行紧密结合，且不断评估并优化我们的方案，为客户提供全方位的互联网品牌整合方案！

===============================================================  //监听事件与回显





    
    
    
     
     //监听事件与回显

         $(function () {
             $("#dragsource").draggable({
                 create: function (event, ui) { $("#div1").html("创建了"); },
                 start: function (event, ui) { $("#div1").html("拖动了"); },
                 drag: function (event, ui) { $("#div1").html("移动中"); },
                 stop: function (event, ui) { $("#div1").html("停止了"); },
                 revert:"invalid",//拖动返回原来的位置
                 cursor:"move"//拖动时的样式
             }); //可拖动DIV
             $("#droppalbe").droppable({
                 create: function (event, ui) { $("#div2").html("创建了"); },
                 activate: function (event, ui) { $("#div2").html("activeta"); }, //判断源div能不能落到目标div上（拖拽中）
                 deactivate: function (event, ui) { $("#div2").html("deactivate"); }, //判断源div能不能落到目标div上(拖拽停止)
                 over: function (event, ui) { $("#div3").html("进入容器"); },
                 out: function (event, ui) { $("#div3").html("离开容器"); },
                 drop: function (event, ui) { $("#div3").html("落到容器上了"); } //和activate、deactivate有冲突
             }); //容器
         });
    


        
        
拽我!

        
                

Drop here

        
                 
                                   

=============================================================== //复制拖动(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")
            });
        });
    


    

    
    

    

 


当前标题：jquery拖动div
本文网址：http://bzwzjz.com/article/gdghgg.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接： 成都网站建设公司 网站制作 企业网站设计 梓潼网站设计 成都网站建设公司 企业网站建设公司 成都网站建设 商城网站建设 重庆网站建设 手机网站制作 成都网站制作 成都网站设计 网站设计制作报价 手机网站建设套餐 企业网站设计 营销型网站建设 营销型网站建设 成都网站设计 响应式网站设计方案 营销网站建设 阿坝网站设计 成都企业网站建设公司 

    • 微信扫一扫在线咨询