拖动效果

转载 2016年06月02日 11:30:28

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

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

oMark.onmousemove=function (ev)
    {

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

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

   alert(oEvent.clientY);

    }

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

<div onmouseover="test(event)"></div>

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>  

相关文章推荐

JavaScript 拖动效果

  • cj205
  • cj205
  • 2011年01月12日 17:30
  • 3254

JavaScript拖动效果

#did { width: 200px; he...
  • a_sid
  • a_sid
  • 2016年12月02日 19:20
  • 121

仿360鼠标拖动图片切换效果

  • 2017年11月15日 17:25
  • 198KB
  • 下载

jQuery动画图片拖动排序效果

  • 2015年08月31日 15:42
  • 2KB
  • 下载

Android UI控件之Gallery --拖动、覆盖、循环、3D图片浏览 效果之一

Android中的Gallery控件是十分灵活的,使用它可以做出许多很炫的效果.接下来要实现的一      中效果在上一篇文章的基础上,实现了循环、覆盖、3D的效果。具体的情况如何?       ...
  • kiritor
  • kiritor
  • 2013年03月21日 14:11
  • 2946

模拟google首页模块拖动效果

  • 2013年04月25日 22:49
  • 31KB
  • 下载

JavaScript图片拖动效果

  • 2012年01月12日 20:10
  • 10KB
  • 下载

iOS拖动按钮排序UI效果

iOS中按钮拖动排序的UI效果
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:拖动效果
举报原因:
原因补充:

(最多只允许输入30个字)