~~~ 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; } } } } ~~~