本文介绍了一个简单的拖拽面板功能实现方法，通过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 发布
扫一扫
4301
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
