JQUERY实现拖动层

class="baidu_pl"> <class="tags" href="/tags/DIV.html" title=div>div id="article_content" class="article_content clearfix"> <class="tags" href="/tags/DIV.html" title=div>div id="content_views" class="htmledit_views">

刚出炉的大家需要的拿去用吧

class</a>="javascript">var DragAndDrop = <a <a class="tags" href="/tags/CLASS.html" title=class>class</a>="tags" href="/tags/FUNCTION.html" title=function>function</a>() { var _clientWidth; var _clientHeight; var _controlObj; var _dragObj; var _flag = false; var _dragObjCurrentLocation; var _mouseLastLocation; var getElementDocument = <a <a class="tags" href="/tags/CLASS.html" title=class>class</a>="tags" href="/tags/FUNCTION.html" title=function>function</a>(element) { //返回某元素的根元素 return element.ownerDocument || element.document }; var dragMouseDownHandler = <a <a class="tags" href="/tags/CLASS.html" title=class>class</a>="tags" href="/tags/FUNCTION.html" title=function>function</a>(evt) { if (_dragObj) { evt = evt || window.event; //获取<a <a class="tags" href="/tags/CLASS.html" title=class>class</a>="tags" href="/tags/LiuLanQi.html" title=浏览器>浏览器</a>宽 _clientWidth = document.body.clientWidth; //获取<a <a class="tags" href="/tags/CLASS.html" title=class>class</a>="tags" href="/tags/LiuLanQi.html" title=浏览器>浏览器</a>高 _clientHeight = document.documentElement.scrollHeight; _flag = true; //定义结构体保存当前left和TOP的值 _dragObjCurrentLocation = { x: $(_dragObj).offset().left, y: $(_dragObj).offset().top }; //定义结构体保存点击鼠标时的位置坐标 _mouseLastLocation = { x: evt.screenX, y: evt.screenY }; //绑定事件 $(document).bind("mousemove", dragMouseMoveHandler); $(document).bind("mouseup", dragMouseUpHandler); //组织默认动作 if (evt.preventDefault) { evt.preventDefault() } else { evt.returnValue = false } } }; var dragMouseMoveHandler = <a <a class="tags" href="/tags/CLASS.html" title=class>class</a>="tags" href="/tags/FUNCTION.html" title=function>function</a>(evt) { if (_flag) { evt = evt || window.event; var _mouseCurrentLocation = { x: evt.screenX, y: evt.screenY }; _dragObjCurrentLocation.x = _dragObjCurrentLocation.x + (_mouseCurrentLocation.x - _mouseLastLocation.x); _dragObjCurrentLocation.y = _dragObjCurrentLocation.y + (_mouseCurrentLocation.y - _mouseLastLocation.y); _mouseLastLocation = _mouseCurrentLocation; $(_dragObj).css("left", _dragObjCurrentLocation.x + "px"); $(_dragObj).css("top", _dragObjCurrentLocation.y + "px"); //组织默认动作 if (evt.preventDefault) { evt.preventDefault() } else { evt.returnValue = false } } }; var dragMouseUpHandler = <a <a class="tags" href="/tags/CLASS.html" title=class>class</a>="tags" href="/tags/FUNCTION.html" title=function>function</a>(evt) { if (_flag) { evt = evt || window.event; cleanMouseHandlers(); _flag = false } }; var cleanMouseHandlers = <a <a class="tags" href="/tags/CLASS.html" title=class>class</a>="tags" href="/tags/FUNCTION.html" title=function>function</a>() { if (_controlObj) { $(_controlObj.document).unbind("mousemove"); $(_controlObj.document).unbind("mouseup") } }; return { //注册事件 Register: <a <a class="tags" href="/tags/CLASS.html" title=class>class</a>="tags" href="/tags/FUNCTION.html" title=function>function</a>(dragObj, controlObj) { _dragObj = dragObj; _controlObj = controlObj; $(_controlObj).bind("mousedown", dragMouseDownHandler) } } } ();

使用方法

class</a>="xhtml"><mce:style></mce:style><style mce_bogus="1">.<a <a class="tags" href="/tags/CLASS.html" title=class>class</a>="tags" href="/tags/DIV.html" title=div>div</a>{width:200px; height:150px; <a <a class="tags" href="/tags/CLASS.html" title=class>class</a>="tags" href="/tags/BORDER.html" title=border>border</a>:1px solid #ccc; margin:10px;position:absolute} .cursor{cursor:move}</style> <body> <<a <a class="tags" href="/tags/CLASS.html" title=class>class</a>="tags" href="/tags/DIV.html" title=div>div</a> <a class="tags" href="/tags/CLASS.html" title=class>class</a>="<a <a class="tags" href="/tags/CLASS.html" title=class>class</a>="tags" href="/tags/DIV.html" title=div>div</a>" id="msg1"> <<a <a class="tags" href="/tags/CLASS.html" title=class>class</a>="tags" href="/tags/DIV.html" title=div>div</a> <a class="tags" href="/tags/CLASS.html" title=class>class</a>="cursor" id="title">DIV层二</<a <a class="tags" href="/tags/CLASS.html" title=class>class</a>="tags" href="/tags/DIV.html" title=div>div</a>> <<a <a class="tags" href="/tags/CLASS.html" title=class>class</a>="tags" href="/tags/DIV.html" title=div>div</a> id="biger" style="top: 130px; position:absolute; <a <a class="tags" href="/tags/CLASS.html" title=class>class</a>="tags" href="/tags/BORDER.html" title=border>border</a>:1px solid #e7e7e7; width:100%; cursor:nw-resize">123</<a <a class="tags" href="/tags/CLASS.html" title=class>class</a>="tags" href="/tags/DIV.html" title=div>div</a>> </<a <a class="tags" href="/tags/CLASS.html" title=class>class</a>="tags" href="/tags/DIV.html" title=div>div</a>> <mce:script type="text/javascript"></mce:script> </body>

class="tags" href="/tags/DIV.html" title=div>div> class="tags" href="/tags/DIV.html" title=div>div> <class="tags" href="/tags/DIV.html" title=div>div id="treeSkill">class="tags" href="/tags/DIV.html" title=div>div>