style:
??? ??*{
? ? ? ? ? ? margin:0;
? ? ? ? ? ? padding:0;
? ? }
? ? ? ?#box{
? ? ? ? ? ? width:100px;
? ? ? ? ? ? height:100px;
? ? ? ? ? ? background:red;
? ? ? ? ? ? position:absolute;
? ? }
注：拖拽時元素需要定位 ? （絕對定位） ?
js代碼：
? ? ? var obox = document.getElementById("box");
? ? ? obox.onmousedown = function(ev){
//兼容
? ? ? ?var oEvent = ev || event;
//獲取距離事件源的距離
? ? ? ?var left = oEvent.clientX - obox.offsetLeft计维；
? ? ? ?var top = oEvent.clientY - obox.offsetTop;
? ? ? document.onmousemove = function(ev){
//兼容
? ? ? ?var oEvent = ev || event;
? ? ? obox.style.left = oEvent.clientX - left + "px";
? ? ? obox.style.top = oEvent.clientY - top + "px";
? ?}
? ? ? document.onmouseup = function(){
? ? ? document.onmousemove = null;
? ? ? ?document.onmouseup = null;
?}
?}
