拖动效果

最新推荐文章于 2022-08-19 10:41:04 发布

SHIROBAKO丶

最新推荐文章于 2022-08-19 10:41:04 发布

阅读量170

点赞数

文章标签： js

1.javascript获取当前鼠标坐标方法：

var oDiv=document.getElementById('id名称');

oMark.οnmοusemοve=function (ev)
{

var oEvent=ev||event; //这里可得到鼠标X坐标

alert(oEvent.clientX); //这里可以得到鼠标Y坐标

alert(oEvent.clientY);

}

2.jQuery获取当前鼠标坐标方法：

function test(e){

//这里可得到鼠标X坐标

var pointX = e.pageX;

//这里可以得到鼠标Y坐标

var pointY = e.pageY;

}

使用js/jQuery的拖动效果

offsetLeft,offsetTop是指距离父元素的距离，针对DOM对象

offset().left,offset().top是指距离document的距离，针对Jquery对象

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style type="text/css" >
            html,body
            {
                height:100%;
                width:100%;
                padding:0;
                margin:0;
            }
            
            .dialog
            {
                width:250px;
                height:250px;
                position:absolute;
                background-color:#ccc;
                -webkit-box-shadow:1px 1px 3px #292929;
                -moz-box-shadow:1px 1px 3px #292929;
                box-shadow:1px 1px 3px #292929;
                margin:10px;
            }
            
            .dialog-title
            {
                color:#fff;
                background-color:#404040;
                font-size:12pt;
                font-weight:bold;
                padding:4px 6px;
                cursor:move;
            }
            
            .dialog-content
            {
                padding:4px;
            }
        </style>
		<script>
		 var draggingObj=null;
		 var diffX=0;
		 var diffY=0;
	   
		 function down(e){
		  if(e.target.className.indexOf("dialog-title")!=-1){
		  draggingObj=e.target.offsetParent;
		  diffX=event.clientX-draggingObj.offsetLeft;
		  diffY=event.clientY-draggingObj.offsetTop;
		   flag=true;
		  }
		 }
		 function move(e){
		  var dialog=document.getElementById('dlgTest');
		  if(draggingObj)
		  {
		  dialog.style.left=e.clientX-diffX+"px";
		  dialog.style.top=e.clientY-diffY+"px";}
		 }
		 function up(){
		  draggingObj=null;
		  diffX=0;
		  diffY=0;
		 }
		 document.addEventListener("mousedown",down);
		 document.addEventListener("mouseup",up);
		 document.addEventListener("mousemove",move);
		</script>
    </head>
    <body>
        <div id="dlgTest" class="dialog">
            <div class="dialog-title">Dialog</div>
            <div class="dialog-content">
                This is a draggable test.
            </div>
        </div>
    </body>
</html>

<!DOCTYPE html>  
<html>  
    <head>  
        <title>Test</title>  
        <style type="text/css" >  
            html,body  
            {  
                height:100%;  
                width:100%;  
                padding:0;  
                margin:0;  
            }  
              
            .dialog  
            {  
                width:250px;  
                height:250px;  
                position:absolute;  
                background-color:#ccc;  
                -webkit-box-shadow:1px 1px 3px #292929;  
                -moz-box-shadow:1px 1px 3px #292929;  
                box-shadow:1px 1px 3px #292929;  
                margin:10px;  
            }  
              
            .dialog-title  
            {  
                color:#fff;  
                background-color:#404040;  
                font-size:12pt;  
                font-weight:bold;  
                padding:4px 6px;  
                cursor:move;  
            }  
              
            .dialog-content  
            {  
                padding:4px;  
            }  
        </style>  
<span style="white-space:pre">		</span><script src="js/jquery-1.12.4.js"></script>
        <script>  
          $(function(){
<span style="white-space:pre">		</span>   var flag=false;
<span style="white-space:pre">		</span>   var xx=0,yy=0;
<span style="white-space:pre">		</span>   $(".dialog-title").mousedown(function(e){
<span style="white-space:pre">		</span>     xx=e.pageX-$("#dlgTest").offset().left;
<span style="white-space:pre">			</span> yy=e.pageY-$("#dlgTest").offset().top;<span style="white-space:pre">		</span>
<span style="white-space:pre">			</span> flag=true;
<span style="white-space:pre">		</span>   });
<span style="white-space:pre">		</span>  $(document).mousemove(function(e) {
                if (flag) {
                var e = e || window.event;
                var oX = e.pageX - xx;
                var oY = e.pageY - yy;
<span style="white-space:pre">				</span>console.log(xx+","+yy);
                $("#dlgTest").css({"left":oX -10+ "px", "top":oY -10+ "px"});
                }
            });
        $(document).mouseup(function(e) {
                flag = false;  
<span style="white-space:pre">				</span>
            })
<span style="white-space:pre">		</span>  })
        </script>  
    </head>  
    <body>  
        <div id="dlgTest" class="dialog">  
            <div class="dialog-title">Dialog</div>  
            <div class="dialog-content">  
                This is a draggable test.  
            </div>  
        </div>  
    </body>  
</html>

SHIROBAKO丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
拖动效果

1.javascript获取当前鼠标坐标方法：var oDiv=document.getElementById('id名称');oMark.onmousemove=function (ev) { var oEvent=ev||event; //这里可得到鼠标X坐标 alert(oEvent.clientX); //这里可以得到鼠标Y
复制链接

扫一扫