min10

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
    
<title>拖动对象 (兼容:IE、Firefox、Opera  )</title>
    
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
    
<style type="text/css">
        .dragAble
        
{
            position
: relative;
            cursor
: move;
        
}
    
</style>

    
<script language="javascript"> 
<!--
        
// Author: Unkonw 
        // Modify: 枫岩@CnLei.com 
        var ie = document.all;
        
var nn6 = document.getElementById && !document.all;
        
var isdrag = false;
        
var y, x;
        
var oDragObj;

        
function moveMouse(e) {
            
if (isdrag) {
                oDragObj.style.top 
= (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + "px";
                oDragObj.style.left 
= (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + "px";
                
return false;
            }
        }

        
function initDrag(e) {
            
var oDragHandle = nn6 ? e.target : event.srcElement;
            
var topElement = "HTML";
            
while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {
                oDragHandle 
= nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
            }
            
if (oDragHandle.className == "dragAble") {
                isdrag 
= true;
                oDragObj 
= oDragHandle;
                nTY 
= parseInt(oDragObj.style.top + 0);
                y 
= nn6 ? e.clientY : event.clientY;
                nTX 
= parseInt(oDragObj.style.left + 0);
                x 
= nn6 ? e.clientX : event.clientX;
                document.onmousemove 
= moveMouse;
                
return false;
            }
        }
        document.onmousedown 
= initDrag;
        document.onmouseup 
= new Function("isdrag=false"); 
//--> 
    </script>

</head>
<body>
    
<img alt="" src="http://pic002.cnblogs.com/img/min10/200903/2009032616292044.jpg" class="dragAble" />
    
<img alt="" src="http://pic002.cnblogs.com/img/min10/200903/2009032616292044.jpg" class="dragAble" />
    
<img alt="" src="http://pic002.cnblogs.com/img/min10/200903/2009032616292044.jpg" class="dragAble" /><br />
    
<br />
    
<div style="border: 1px solid #ff6d00; background: #ffd801; width: 240px; padding: 5px 0; font-size:12px; text-align:center;"
        class
="dragAble">
        
<b>随便拖吧</b></div>
</body>
</html>

 

 

posted on 2009-03-26 16:31  min10  阅读(758)  评论(0编辑  收藏  举报