最简洁的js鼠标拖曳效果【原】

请原谅我是一个标题档,不过还是很简洁的,因为只是初步的实现的拖曳效果
<!DOCTYPE html>
<html>
<head>
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
<meta http-equiv="Content-Language" content="zh-cn" />
    
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    
<title>DragDrop</title>
    
<meta name="author" content="flowerszhong">
    
<meta name="date" content="">
    
<link href="" rel="stylesheet" type="text/css" />
    
<!--[if IE]>
      <script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
  <![endif]
-->
    
<!-- <script src="http://code.jquery.com/jquery-latest.js"></script> -->
    
<style type="text/css">
        .redBorderBox
        
{
            border
: 2px solid red;
            position
: absolute;
            width
: 60px;
            height
: 60px;
            cursor
: move;
            background-color
: Red;
        
}
    
</style>
</head>
<body>
    
<div id="hd">
    
</div>
    
<div id="bd">
        
<div class="redBorderBox" id="dragObj1">
            i am not dragObj
</div>
        
<div class="redBorderBox dragObj" id="dragObj2" style="top: 90px; left: 90px;">
            u can drag me
</div>
    
</div>
    
<div id="ft">
    
</div>
</body>

<script>
    
/* 鼠标拖动 */
    (
function() {
        
var oDrag = "";
        
var ox, oy, nx, ny, dy, dx;
        
function drag(e) {
            
var e = e ? e : event;
            oDrag 
= e.target ? e.target : e.srcElement;
            
if (oDrag.className.indexOf("dragObj"== -1) { oDrag = ""}
            ox 
= e.clientX;
            oy 
= e.clientY;
        }
        
function dragPro(e) {
            
if (oDrag != "") {
                
var e = e ? e : event;
                dx 
= parseInt(oDrag.style.left);
                dy 
= parseInt(oDrag.style.top);
                nx 
= e.clientX;
                ny 
= e.clientY;
                oDrag.style.left 
= (dx + (nx - ox)) + "px";
                oDrag.style.top 
= (dy + (ny - oy)) + "px";
                ox 
= nx;
                oy 
= ny;
            }
        }
        document.onmousedown 
= function(e) { drag(e); }
        document.onmouseup 
= function() { oDrag = ""; }
        document.onmousemove 
= function(event) { dragPro(event); }
    })();
</script>

</html>
感谢你留言,转载请声明出处:http://www.cnblogs.com/flowerszhong
上一篇:八百年一次,这个七月有5个礼拜五,5个礼拜六,5个礼拜天(js Date对象练习良好方案)[原]


下一篇:当屌丝想看《蜀山剑侠传》[python屏幕抓取]