首页 > 代码库 > JavaScript 拖放效果

JavaScript 拖放效果

<style></style>

拖放效果,也叫拖拽、拖动,是javascript常用到的交互效果。现在来实现一个简单的拖放效果:

 

拖动div
 

<script type="text/javascript">// -1){ diffX = event.clientX - target.offsetLeft; //鼠标位置距离拖动块X方向像素 diffY = event.clientY - target.offsetTop; //鼠标位置距离拖动块Y方向像素 dragging = target; } break; case "mousemove": if(dragging !== null){ dragging.style.left = event.clientX - diffX + "px"; dragging.style.top = event.clientY - diffY + "px"; showStatus("drag-status",dragging.style.left,dragging.style.top); } break; case "mouseup": dragging = null; break; } } //返回公共接口 return { enable:function(){ EventUtil.addEventHandler(document,"mousedown",handleEvent); EventUtil.addEventHandler(document,"mousemove",handleEvent); EventUtil.addEventHandler(document,"mouseup",handleEvent); }, disable:function(){ EventUtil.removeEventHandler(document,"mousedown",handleEvent); EventUtil.removeEventHandler(document,"mousemove",handleEvent); EventUtil.removeEventHandler(document,"mouseup",handleEvent); } }; }(); //调用拖动函数 drag.enable();// ]]></script>

JavaScript 拖放效果