jquery 拖动div

发布时间:2020-08-05 13:36:59 作者:1473348968
来源:网络 阅读:389

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

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

<!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>
    <title></title>
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
     <script type="text/javascript">
     //监听事件与回显

         $(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有冲突
             }); //容器
         });
    </script>
</head>
<body>
        <div id="dragsource"  >
        <p>拽我!</p>
        </div>

       <div id="droppalbe" >
        <p>Drop here</p>
        </div>



        <div id="div1" >
        </div>
        <div id="div2" >
        </div>
        <div id="div3" >
        </div>
</body>
</html>

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

<!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>
    <title></title>
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    //复制拖动

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


    </script>
</head>
<body>
    

    <div></div>


    <div >
        <div id="resource" ></div>
    </div>
    <div  id="targer"></div>
</body>
</html>

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

<!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>
    <title></title>
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
        //拖动方向控制
            $("#resouce").draggable({
                //axis: "x"//限制x轴移动
                axis: "y"//限制y轴移动
            });
        });
    </script>
</head>
<body>
    

    <div  id="resouce"></div>
</body>
</html>

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

<!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>
    <title></title>
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    //拖动范围控制
        $(function () {
            $("#resource").draggable({
            //containment: $("#targer")     第一种方式
            // containment:"parent"         第二种方式
            containment:[0,0,300,200]     //第三种方式
            });
        });
    </script>
</head>
<body>
    
   <div  id="targer">
   <div id="resource" ></
   </div>
   div>
</body>
</html>

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

<!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>
    <title></title>
      <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>

<script type="text/javascript">
    $(function () {
        //拖动吸附
        $("#source1").draggable({
            snap:true
        });

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

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

    });
</script>
</head>
<body>

<div id="targer" >容器</div>
<br /><br /><br />
<div id="source1" >吸附到可拖动div</div>
<br /><br /><br />
<div id="source2" >吸附到容器</div>
<br /><br /><br />
<div id="source3" >吸附到网格</div>

  

</body>
</html>

=============================================================== //拖动div手柄(handle)

<!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>
    <title></title>
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //拖动div手柄
            $("#resource").draggable({
                handle:$(".p")
            });
        });
    </script>
</head>
<body>
    

    <div id="resource" >
    <p class="p"  ></p>
    </div>
</body>
</html>

 

推荐阅读:
  1. 06 jQuery EasyUI 之Droppable可放置
  2. 05 jQuery EasyUI 之Draggable可拖动

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

div 拖动 jquery 拖动div

上一篇:页面布局和设备适配

下一篇:wuzhicms查找:当前页面使用的哪个文件

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》