初步製作拖拽div以及彈出層以及切換標籤

html**：

賬號：密碼：

css**：

body #login #screen

js**（需要引入jquery）下面的document.documentelement可以用

document代替

：

$(function());
//登陸框繫結滑鼠按下的事件
$("#login").bind('mousedown',function(e)
//繫結滑鼠移動的事件（這裡是給整個窗體繫結的，但是為了相容ie，不使用window，注意也不是繫結login這個div）
$(document.documentelement).bind('mousemove',function(e2));
});});
//繫結滑鼠彈起的事件（這裡是給整個窗體繫結的，但是為了相容ie，不使用window，注意也不是繫結login這個div）
$(document.documentelement).bind('mouseup',function()
});});

上面的mousemove和mouseup事件繫結到document.documentelement上面，而不是login這個div上面，也不是window上面，因為window的話，在ie裡面不相容，在login這個div上面的話，會出現div跟不上滑鼠移動的情況，是為了解決滑鼠移動較快的時候，div不能跟上滑鼠的移動節奏所導致的一些bug。。。

如果上面login這個div的定位不是使用的top:50,left:50%,而是通過畫素來定位的話，需要注意：

//獲取滑鼠位置：
e.clientx,e.clienty
//獲取login這個div的左上角的實際位置：
var _login = document.getelementbyid("login");
top = _login.offsettop;
left = _login.offsetleft;
//獲取login這個div的寬高：
width = _login.offsetwidth;
height = _login.offsetheight;
//獲取瀏覽器實際大小：
if(typeof window.innerheight != 'undefined'));
}else);
}

切換標籤小demo（jquery權威指南例子）：

aaaaaa

提示框跟隨滑鼠移動：

關於使用者研究的一點思考

實現Div拖拽

直觀的理解div拖拽當滑鼠對著可拖拽部分按住後並拖動，div會跟著滑鼠一起運動，並且其運動空間限制在瀏覽器內部，當放開滑鼠時，則div停止運動。實現div拖拽需要三個重要的事件 1 onmousedown 滑鼠按下事件 2 onmousemove 滑鼠移動事件 3 onmouseup 滑鼠抬起事件...

滑鼠拖拽div元素

上圖中綠色箭頭指向的分別是3個事件，大概的意思是滑鼠單擊div box元素後，啟用了document.onmousemove滑鼠移動事件，在移動滑鼠時，會改變div box的left top值，從而達到div box元素隨著滑鼠移動。單滑鼠放開時觸發了document.onmouseup滑鼠鬆開事...

物件導向div拖拽

html css div js odiv.onmousedown function ev document.onmousemove function ev else if l document.documentelement.clientwidth odiv.offsetwidth 縱向 if t ...

初步製作拖拽div以及彈出層 以及 切換標籤

實現Div拖拽

滑鼠拖拽div元素

物件導向div拖拽

相關推薦

初步製作拖拽div以及彈出層以及切換標籤