jquery经典实例之拖动面板

最新推荐文章于 2021-02-27 12:56:28 发布

编程界小明哥

最新推荐文章于 2021-02-27 12:56:28 发布

阅读量224

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/dkm123456/article/details/110821273

版权

jquery 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="GBK">
    <title></title>
</head>
<body>
    <div style="position: absolute;border: 1px solid yellow;width: 500px;">
        <div id="title" style="background-color:powderblue;height: 30px;">
            <strong>标题</strong>
        </div>
        <div style="height: 300px;">
            内容
        </div>
    </div>
    <script src="jquery-1.5.1.js"></script>
<script>
    $(function () {
        $('#title').mouseover(function () {
            $(this).css('cursor','move');
        }).mousedown(function (e) {
            var _event = e || widows.event;
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;
            
            var parent_left = $(this).parent().offset().left;
           	var parent_top = $(this).parent().offset().top;

            $(this).bind('mousemove',function (e) {
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;
                
                var x = parent_left + (new_x - ord_x);
                var y = parent_top + (new_y - ord_y);

                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');
            })
        }).mouseup(function () {
            $(this).unbind('mousemove');
        });
    })
</script>
</body>
</html>