jQuery实现动态面板 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>拖动面板</title>
    <meta charset="UTF-8">
</head>
<body>
<div style='width:600px;position:absolute;border:1px solid #ddd'>
    <div id="title" style="background-color: black;height: 40px;color:white">标题</div>
    <div id="content" style="height: 300px;">内容</div>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
    $('#title').mouseover(function () {
        $(this).css('cursor','move');

    }).mousedown(function (evnent) {
        var start_x=event.screenX;
        var start_y=event.screenY;
        var parent_left=$(this).parent().offset().left;
        var parent_top=$(this).parent().offset().top;

        //event拿到的是新的位置坐标(event放在触发的函数里面)
        $(this).on('mousemove',function (e) {
            var new_st_x=e.screenX;
            var new_st_y=e.screenY;

            var new_par_x=parent_left+(new_st_x-start_x);
            var new_par_y=parent_top+(new_st_y-start_y);

            $(this).parent().css('left',new_par_x+'px');
            $(this).parent().css('top',new_par_y+'px');

        }).mouseup(function () {
            $(this).off('mousemove');
        })
    })

</script>

</body>
</html>







            

            
posted @ 
2020-02-19 10:33 
Stary_tx 
阅读(424) 
评论(0) 
编辑 
收藏 
举报