JQuery窗口拖动效果

最新推荐文章于 2025-09-13 09:06:35 发布

转载最新推荐文章于 2025-09-13 09:06:35 发布 · 101 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/oospace/blog/356565

文章标签：

#javascript #php #python #ViewUI

2019独角兽企业重金招聘Python工程师标准>>>

JQuery代码

var _z=9999;
$(document).ready(function(){
 var _move=false;//移动标记
 var _x,_y;//鼠标离控件左上角的相对位置
 var wd;//窗口
    $(".window").click(function(){
        //alert("click");//点击（松开后触发）
     this.style.cursor = "default";//鼠标形状
     //this.style.zIndex = 999;
        }).mousedown(function(e){
        _move=true;
        wd=$(this);
        this.style.cursor = "move";//鼠标形状
        this.style.zIndex = _z;//窗口层次
        _z++;
        _x=e.pageX-(isNaN(parseInt(wd.css("left")))?0:parseInt(wd.css("left")));
        _y=e.pageY-(isNaN(parseInt(wd.css("top")))?0:parseInt(wd.css("top")));       
        /*  wd.fadeTo(20, 0.25); *///点击后开始拖动并透明显示
        $(document).mousemove(function(e){
            if(_move){
                var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
                var y=e.pageY-_y;
                wd.css({top:y,left:x});//控件新位置
            }
        }).mouseup(function(){
        _move=false;
        /* wd.fadeTo("fast", 1); *///松开鼠标后停止移动并恢复成不透明
      });
    });
   
});

Html代码

<style>
        .window{
            	width:100px;
            	height:100px;
            	cursor:pointer;
                position: relative;
                left:100px;
                top:90px;
                
                background-color:#DCDCDC;
                border-radius: 7px;
                z-index: 1;
            	border:1px solid black;
            	padding:50px;
            
        }
        .body{
        
        padding:20px 30px 30px 30px;
        position:absolute;
        top:150px;
        left:50%;
        margin-left:-500px;
    	width:940px;
        min-width:940px;
        background-color:#F8F8FF;
        border:1px solid #DCDCDC;
        border-bottom:5px solid #BA55D3;
        border-radius:3px;
        behavior:url(js/PIE.htc);
    }
    </style>
    </head>
    <body>
        <div class="body"  >
        <div class="window"  title="点击拖动">全局拖动</div>
        </div>
    </body>

效果：http://oospace.sinaapp.com/1.php

使用方法：

1，给div添加class="window"即可

2，div要有一定的宽和高

实现原理：

未完待续。。。

转载于:https://my.oschina.net/oospace/blog/356565