jquery拖动div-创新互联-营山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

jquery拖动div-创新互联

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

成都创新互联2013年至今，先为莆田等服务建站，莆田等地企业，进行企业商务咨询服务。为莆田企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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





    
    
    
     
     //监听事件与回显

         $(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)

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

新闻中心

其他资讯