当前位置： 移动技术网 > IT编程>网页制作>CSS > HTML 练习拖动面板

HTML 练习拖动面板

2019年03月20日  | 移动技术网IT编程  | 我要评论 
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <div style="border: 1px solid #ddd; width: 600px; position: absolute;">
        <div id="title" style="background-color:black;height:40px; color: white;">
            标题
        </div>
        <div style="height: 300px;">
            内容
        </div>
    </div>
</body>
<script>
    $("#title").mouseover(function(){
        $(this).css("cursor","move")
    }).mousedown(function (event){
        var start_x=event.screenx;
        var start_y=event.screeny;

        var parent_left=$(this).parent().offset().left;
        var parent_top =$(this).parent().offset().top;

        $(this).on("mousemove", function(e){
            var new_x=e.screenx;
            var new_y=e.screeny;

            var new_parent_x=parent_left+(new_x-start_x);
            var new_parent_y=parent_top+(new_y-start_y);

            $(this).parent().css("left", new_parent_x+"px");
            $(this).parent().css("top", new_parent_y+"px");
        }).mouseup(function(){
            $(this).off("mousemove")
        })
    })
</script>
</html>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网