~~~ function drag(target, obj) { //target:鼠標按下的目標;obj:要拖動的整體對象(兩者須原生獲取) target.onmousedown = function(ev) { var ev = ev || window.event; var disX = ev.clientX - obj.offsetLeft; var disY = ev.clientY - obj.offsetTop; //鼠標移動事件 document.onmousemove = function(ev) { var ev = ev || window.event; obj.style.left = ev.clientX - disX + 'px'; obj.style.top = ev.clientY - disY + 'px'; } //鼠標抬起事件 document.onmouseup = function() { document.onmousemove = null; } } ~~~ #### 邊框拖拽 * * * * * ~~~ var m = 0; function drag(target, obj,obj_border) { //target:鼠標按下的目標;obj:鼠標抬起時，瞬移的對象;obj_border:要拖動的邊框對象(三者須原生獲取) target.onmousedown = function(ev) { if(ev.target == target){ //按下時，顯示邊框 search_bar_border.style.display = 'block'; var ev = ev || window.event; var disX = ev.clientX - obj.offsetLeft; var disY = ev.clientY - obj.offsetTop; //鼠標拖動時，邊框跟隨移動 document.onmousemove = function(ev) { m = 1; var ev = ev || window.event; obj_border.style.left = ev.clientX - disX + 'px'; obj_border.style.top = ev.clientY - disY + 'px'; } //鼠標抬起時，讓obj瞬間移到邊框位置，隱藏邊框 document.onmouseup = function(ev) { var ev = ev || window.event; //m用于判斷鼠標是否移動，排除直接點擊瞬移的可能 if(m == 1){ m = 0; obj.style.left = ev.clientX - disX + 'px'; obj.style.top = ev.clientY - disY + 'px'; } search_bar_border.style.display = 'none'; document.onmousemove = null; } } } } ~~~