Posted in Javascript onMarch 29, 2013
/* 拖拽流程: 1、第一步点击需要拖动的元素 2、在点击下的元素被选中,进行move移动 3、当鼠标弹起的时候,停止动作 4、点击元素oDIV的时候,可用的是oDIV区域,而move和up则是全局区域,也就是整个文档通用,即应该用document */ oDIV = document.getElementById("gaga"); oDIV.onmousedown = function( e ){ // 当鼠标点击下去的时候 var diffX = e.clientX - oDIV.offsetLeft; // 点击的位置距离浏览器最左边的位置(clientX) 再减去被点击元素距离最左边的位置(oDIV.offetLeft) 在引动的所点击的元素距离最左边的位置是不确定的 所以需要这个结果 var diffY = e.clientY - oDIV.offsetTop; // 点击的位置距离浏览器顶部的位置(clientY) 再减去被点击元素距离顶部的位置(oDIV.offsetTop) 在引动的所点击的元素距离顶部的位置是不确定的 所以需要这个结果 document.onmousemove = function( e ){ // 当按下鼠标不放的时候 var e = e || window.event; oDIV.style.top = e.clientY - diffY + "px"; oDIV.style.left = e.clientX - diffX + "px"; }; document.onmouseup = function(){ // 当鼠标弹起的时候 document.onmousemove = null; // 清空鼠标按下鼠标不放的事件 document.onmouseup = null; // 清空鼠标弹起事件 } };
原生js拖拽(第一课 未兼容)拖拽思路
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@