HTML 练习拖动面板

时间:2019-03-19
本文章向大家介绍HTML 练习拖动面板，主要包括HTML 练习拖动面板使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
<!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>
随机文章
WEB前端知识点必读
最近更新