本例是個非常簡單的div拖動，有需要的朋友可依自己的需求，並加入對應的程式碼。歡迎拍磚 複製代碼 代碼如下: BR> div width resize type="text/javascript"> <BR>function bindResize(el) <BR>{ <BR>//初始化參數<BR>var els = document.getElementById('menu').style; <BR> //老鼠的X 和Y 軸座標<BR>x = 0; <BR>//邪惡的食指<BR>$(el).mousedown(function (e) <BR>{ <BR>//按下元素之後，計算當前滑鼠與物件計算後的座標<BR>x = e.clientX - el.offsetWidth - $("#menu").width(); <BR>//在支援setCapture 做些東東<BR>el.setCapture ? ( <BR>//捕捉焦點<BR>el.setCapture(), <BR>//設定事件<BR>el.onmousemove = function (ev) <BR>{ <BR>mouseMove(ev || event); <BR>}, <BR>el.onmouseup = mouseUp <BR>) : ( <BR>//綁定事件<BR>$(document).bind("mousemove", mouseMove).bind ("mouseup", mouseUp) <BR>); <BR>//防止預設事件發生<BR>e.preventDefault(); <BR>}); <BR>//移動事件<BR>function mouseMove(e ) <BR>{ <BR>//宇宙超級無敵運算中... <BR>els.width = e.clientX - x 'px'; <BR>} <BR>//停止事件<BR>function mouseUp () <BR>{ <BR>//在支援releaseCapture 做些東東<BR>el.releaseCapture ? ( <BR>//釋放焦點<BR>el.releaseCapture(), <BR>//移除事件<BR>el.onmousemove = el.onmouseup = null <BR>) : ( <BR>//卸載事件<BR>$(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp) <BR>); <BR>} <BR>} <BR>var divResize=function(){ <BR>var totalHeight=$("html").height(); <BR>console.log(totalHeight); <BR>var topHeight=$("#top").height() <BR>$("#menu").height(totalHeight-topHeight); <BR>$("#rightbar").height(totalHeight- topHeight); <BR>} <BR>$(function() { <br>divResize(); <br>$(window).resize(divResize); <BR><BR>bindResize(document..right ')); <BR>}); <BR> <BR>.content { <BR>width: 200px; <BR>background: #f1f1f1 ; <BR>text-align: center; <BR>border-color: #CCCCCC; <BR>border-style: solid; <BR>border-width: 0 1px; <BR>} <BR> style="width: 2px; background: #cccccc; cursor: e -resize;"> --%> 待拖曳的div style="width: 2px; background: #cccccc; cursor: e-resize; float: left;">
