`

[转]JavaScript简单实现div拖拽

 
阅读更多
<iframe align="center" marginwidth="0" marginheight="0" src="http://www.zealware.com/csdnblog336280.html" frameborder="0" width="336" scrolling="no" height="280"></iframe>

Javascript元素拖曳操作Byshawl.qiu(兼容IE,Opera,Firefox)


说明:
拖曳流程
鼠标按下->(鼠标移动->元素移动)
鼠标按键弹起->元素停止移动

针对IE,主要使用obj.attachEvent()&&obj.detachEvent()
针对Firefox主要使用DOM2的obj.addEventListener()&&obj.removeEventListener
Opera以上两种方法都支持

在本文中,需要拖曳的元素必须指定style属性为position:absolute;
且应指定left&&top的坐标值,如:
    linenum
  2. element1
  3. draggingcompatibilityforIE,Opera,Firefox.

函数fDragging(obj,e,limit)的各参数解释:
obj:HTML元素对象,要拖曳的元素
e:指定为event对象,主要为兼容Firefox
limit:布尔值,指定是否只能在父元素中拖曳,false可移动至任何位置.

函数fDragging(obj,e,limit)应该在HTMLonmousedown属性下使用,如:
    linenum
  2. element
  3. draggingcompatibilityforIE,Opera,Firefox.

shawl.qiu
2006-11-10
http://blog.csdn.net/btbtd

函数:fDragging(obj,e,limit)及使用演示
    linenum
  1. htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. http://www.w3.org/1999/xhtml">
  3. <!--DW6-->
  5. <meta>
  6. shawl.qiutemplate
  7. <script> </li> <li>//<![CDATA[ </li> <li>functionfDragging(obj,e,limit){ </li> <li>if(!e)e=window.event; </li> <li>varx=parseInt(obj.style.left); </li> <li>vary=parseInt(obj.style.top); </li> <li> </li> <li>varx_=e.clientX-x; </li> <li>vary_=e.clientY-y; </li> <li> </li> <li>if(document.addEventListener){ </li> <li>document.addEventListener('mousemove',inFmove,true); </li> <li>document.addEventListener('mouseup',inFup,true); </li> <li>}elseif(document.attachEvent){ </li> <li>document.attachEvent('onmousemove',inFmove); </li> <li>document.attachEvent('onmouseup',inFup); </li> <li>} </li> <li> </li> <li>inFstop(e); </li> <li>inFabort(e) </li> <li> </li> <li>functioninFmove(e){ </li> <li>varevt; </li> <li>if(!e)e=window.event; </li> <li> </li> <li>if(limit){ </li> <li>varop=obj.parentNode; </li> <li>varopX=parseInt(op.style.left); </li> <li>varopY=parseInt(op.style.top); </li> <li> </li> <li>if((e.clientX-x_)<0)returnfalse; </li> <li>elseif((e.clientX-x_+obj.offsetWidth+opX)>(opX+op.offsetWidth))returnfalse; </li> <li> </li> <li>if(e.clientY-y_<0)returnfalse; </li> <li>elseif((e.clientY-y_+obj.offsetHeight+opY)>(opY+op.offsetHeight))returnfalse; </li> <li>//status=e.clientY-y_; </li> <li>} </li> <li> </li> <li>obj.style.left=e.clientX-x_+'px'; </li> <li>obj.style.top=e.clientY-y_+'px'; </li> <li> </li> <li>inFstop(e); </li> <li>}//shawl.qiuscript </li> <li>functioninFup(e){ </li> <li>varevt; </li> <li>if(!e)e=window.event; </li> <li> </li> <li>if(document.removeEventListener){ </li> <li>document.removeEventListener('mousemove',inFmove,true); </li> <li>document.removeEventListener('mouseup',inFup,true); </li> <li>}elseif(document.detachEvent){ </li> <li>document.detachEvent('onmousemove',inFmove); </li> <li>document.detachEvent('onmouseup',inFup); </li> <li>} </li> <li> </li> <li>inFstop(e); </li> <li>}//shawl.qiuscript </li> <li> </li> <li>functioninFstop(e){ </li> <li>if(e.stopPropagation)returne.stopPropagation(); </li> <li>elsereturne.cancelBubble=true; </li> <li>}//shawl.qiuscript </li> <li>functioninFabort(e){ </li> <li>if(e.preventDefault)returne.preventDefault(); </li> <li>elsereturne.returnValue=false; </li> <li>}//shawl.qiuscript </li> <li>} </li> <li>//]]> </li> <li></script>
  10. thisparent
  13. element
  14. draggingcompatibilityforIE,Opera,Firefox.
  • element1
  • draggingcompatibilityforIE,Opera,Firefox.
  • element2
  • draggingcompatibilityforIE,Opera,Firefox.
  • draggingeverywhere

    • 来源： http://blog.csdn.net/btbtd/archive/2006/11/10/1377810.aspx




    分享到：
    | [原创]基于PHP写的Web服务器：Nanoweb
    评论
    发表评论

    您还没有登录,请您登录后再发表评论

    相关推荐

    Magicbox
    Global site tag (gtag.js) - Google Analytics