注册 登录  
 加关注

网易博客网站关停、迁移的公告:

将从2018年11月30日00:00起正式停止网易博客运营
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

jiwenxu的博客

CODE

 
 
 

日志

 
 

Javascript 元素拖曳操作 By shawl.qiu (兼容IE,Opera,Firefox)[转]  

2006-11-13 15:45:47|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>shawl.qiu template</title>
<script type="text/javascript">
//<![CDATA[
    functionfDragging(obj, e, limit){
       if(!e) e=window.event;
       var x=parseInt(obj.style.left);
       var y=parseInt(obj.style.top);
        
       var x_=e.clientX-x;
       var y_=e.clientY-y;
        
       if(document.addEventListener){
           document.addEventListener('mousemove', inFmove, true);
           document.addEventListener('mouseup', inFup, true);
       } else if(document.attachEvent){
           document.attachEvent('onmousemove', inFmove);
           document.attachEvent('onmouseup', inFup);
       }
        
       inFstop(e);    
       inFabort(e)
        
       function inFmove(e){
           var evt;
           if(!e)e=window.event;
            
           if(limit){
               var op=obj.parentNode;
               var opX=parseInt(op.style.left);
               var opY=parseInt(op.style.top);
                
               if((e.clientX-x_)<0) return false;
               else if((e.clientX-x_+obj.offsetWidth+opX)>(opX+op.offsetWidth))return false;
                
               if(e.clientY-y_<0) return false;
               elseif((e.clientY-y_+obj.offsetHeight+opY)>(opY+op.offsetHeight))return false;
               //status=e.clientY-y_;
           }
            
           obj.style.left=e.clientX-x_+'px';
           obj.style.top=e.clientY-y_+'px';
            
           inFstop(e);
       } // shawl.qiu script
       function inFup(e){
           var evt;
           if(!e)e=window.event;
            
           if(document.removeEventListener){
               document.removeEventListener('mousemove', inFmove, true);
               document.removeEventListener('mouseup', inFup, true);
           } else if(document.detachEvent){
               document.detachEvent('onmousemove', inFmove);
               document.detachEvent('onmouseup', inFup);
           }
            
           inFstop(e);
       } // shawl.qiu script
 
       function inFstop(e){
           if(e.stopPropagation) return e.stopPropagation();
           else returne.cancelBubble=true;            
       } // shawl.qiu script
       function inFabort(e){
           if(e.preventDefault) return e.preventDefault();
           else return e.returnValue=false;
       } // shawl.qiu script
    }
//]]>
</script>
</head>
<body>
<div  style=" border:1px dashed blue; width:760px; height:600px;  text-align:center;position:absolute; left:100px; top: 10px;"> this parent
 
    <divstyle=" border:1px dashed blue; width: 180px; text-align:center;position:absolute; left:50px; top: 50px;"onmousedown="fDragging(this, event, true);">
       element <br/>
       dragging compatibility for IE, Opera,Firefox. 
   </div>
    <divstyle=" border:1px dashed blue; width: 180px; text-align:center;position:absolute; left:100px; top: 150px;"onmousedown="fDragging(this, event, true);">
       element 1<br/>
       dragging compatibility for IE, Opera,Firefox. 
   </div>
    <divstyle=" border:1px dashed blue; width: 180px; text-align:center;position:absolute; left:200px; top: 250px;"onmousedown="fDragging(this, event, false);">
       element 2<br/>
       dragging compatibility for IE, Opera, Firefox. <br/>
       <font color="red">dragging everywhere</font>
   </div>
</div>
</body>
</html>

  评论这张
 
阅读(52)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018