本文介绍了一个简单的拖拽面板功能实现方法，通过JavaScript监听鼠标事件完成元素的拖动。具体包括鼠标按下时记录初始位置差值、鼠标移动时更新元素位置及鼠标抬起时取消事件监听等步骤。
var MyDragHandler = { DragPanelId: "divContext", _idiffx: 0, _idiffy: 0, _Div: null, AttachDrag: function(dragId) { if (dragId) MyDragHandler._Div = document.getElementById(dragId); else MyDragHandler._Div = document.getElementById(MyDragHandler.DragPanelId); document.body.onmousedown = MyDragHandler._handleMouseDown; }, _handleMouseDown: function() { var oEvent = window.event; if (MyDragHandler._Div) { MyDragHandler._idiffx = oEvent.clientX - MyDragHandler._Div.offsetLeft; MyDragHandler._idiffy = oEvent.clientY - MyDragHandler._Div.offsetTop; document.body.onmousemove = MyDragHandler._handleMouseMove; document.body.onmouseup = MyDragHandler._handleMouseUp; } }, _handleMouseMove: function() { var oEvent = window.event; MyDragHandler._Div.style.left = oEvent.clientX - MyDragHandler._idiffx; MyDragHandler._Div.style.top = oEvent.clientY - MyDragHandler._idiffy; MyDragHandler._Div.style.cursor = "move"; }, _handleMouseUp: function() { document.body.onmousemove = null; document.body.onmouseup = null; MyDragHandler._Div.style.cursor = "default"; } }
MyDragLibrary.js
最新推荐文章于 2021-06-03 21:15:49 发布
扫一扫
4297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
