DIV拖动效果的实现。
//拖动实现。var DD = function ($){var htmlObj = null;var ddObj = null;var top;var left;var _x;var _y;//鼠标按下的时候function _mouseDown(event){event = window.event || event;//IE的Event是全局事件,FF的不是//layerX/layerY:事件相对于当前坐标系的位移(FF,需要设置position属性为absolute或者relative方可用)//offsetX/offsetY:事件相对于当前父元素的位移(IE);_x = event.layerX || event.offsetX;_y = event.layerY || event.offsetY;htmlObj.style.cursor = "move";if(htmlObj.setCapture){htmlObj.setCapture();htmlObj.onmousemove = _mouseMove;htmlObj.onmouseup = _mouseUp;}else if(window.captureEvents){window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);document.onmousemove = _mouseMove;document.onmouseup = _mouseUp;}}//鼠标释放的时候function _mouseUp(event){event = window.event || event;//IE的Event是全局事件,FF的不是htmlObj.style.cursor = "";if(htmlObj.releaseCapture){htmlObj.releaseCapture();htmlObj.onmousemove = null;htmlObj.onmouseup = null;}else if(window.captureEvents){window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);document.onmousemove = null;document.onmouseup = null;}}//鼠标移动的时候function _mouseMove(event){event = window.event || event;//IE的Event是全局事件,FF的不是//pageX/pageY相对于网页的位移(FF)//clientX/clientY相对于可视窗口的位移(IE)var x = event.pageX || event.clientX;var y = event.pageY || event.clientY;//获取滚动条的坐标left = document.body.scrollLeft;top = document.body.scrollTop;//计算位置x = x - _x + left;y = y - _y + top;//当X和Y坐标小于0时,默认为0x = x < 0 ? 0 : x;y = y < 0 ? 0 : y;$(ddObj).css("top",y);$(ddObj).css("left",x);$(ddObj).fadeIn("fast");}function ddrag(onHtml,ddHtml){htmlObj = onHtml;ddObj = ddHtml;htmlObj.onmousedown = _mouseDown;}return {ddrag : ddrag};}(jQuery);
说明:
onHtml:它为鼠标点击按下时的HTML对象
ddHtml:它为需要拖动的HTML对象。
一般默认onHtml为ddHtml的子元素。
调用方式:
DD.ddrag(document.getElementById("_title"),document.getElementById("showDescTextArea"));
HTML代码:
<div id="showDescTextArea" onkeypress="escHideDiv(event)" style="display: none;position: absolute;background-color: #CCCCFF;border: thick double #CCCCFF;z-index: 10000"><h5 id="_title"></h5><textarea rows="10" cols="50" name="_desc" id="_desc" ></textarea><br/><input type="button" class="btn_width1111" value="确定" onclick="ok()"/><input type="button" class="btn_width1111" value="取消" onclick="hideDiv()"/></div>