拖动窗口

回忆中贤

于 2019-03-27 08:04:35 发布

阅读量149

点赞数

CC 4.0 BY-SA版权

分类专栏： js JQuery 文章标签： div拖动

本文链接：https://blog.youkuaiyun.com/weixin_44540416/article/details/88821057

JQuery 同时被 2 个专栏收录

14 篇文章

订阅专栏

13 篇文章

订阅专栏

开发工具与关键技术：DW开发 JQuery插件
作者：罗中贤
撰写时间：2019-03-26

窗口作拖动方便操作

<div class="mao">
	<div class="Mao_ltu"></div>
</div>


.mao{
	position: fixed;
	display: none; 
	width: 100%; 
	top: 0px;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 1000;
	
}
.Mao_ltu{
	width:1012px ;
	height: 612px;
	border: 2px solid #FFFFFF;
	border-radius: 10px;
	position: fixed;
}

方法

 dragPanelMove(".Mao_ltu", ".Mao_ltu");
            function dragPanelMove(downDiv, moveDiv) {
                $(downDiv).mousedown(function (e) {
                    var isMove = true;
                    var div_x = e.pageX - $(moveDiv).offset().left;
                    var div_y = e.pageY - $(moveDiv).offset().top;
                    $(document).mousemove(function (e) {
                        if (isMove) {
                            var obj = $(moveDiv);
                            obj.css({ "left": e.pageX - div_x, "top": e.pageY - div_y });
                        }
                    }).mouseup(
                        function () {
                            isMove = false;
                        });
                });

            }