本文介绍如何使用原生JavaScript实现元素拖拽，并通过Cookie保存拖拽后的坐标位置。核心逻辑涉及onmousedown、onmousemove和onmouseup事件处理，重点解决事件对象兼容性问题。通过封装addCookie和getCookie方法，在页面加载时读取保存的坐标并重置元素位置，实现刷新后位置记忆功能。
拖拽原理与事件兼容处理
实现该功能主要依赖原生JavaScript封装的Cookie操作，并绑定onmousedown、onmousemove和onmouseup三个鼠标事件。由于不同浏览器对事件对象event的处理存在差异，需进行兼容性处理，通常采用oEvent = ev || event的方式获取标准事件对象。通过该对象可获取鼠标点击时的屏幕坐标，减去被拖拽元素距离视口左侧和顶部的初始偏移量，从而计算出鼠标点击点相对于元素自身的相对位置。
在onmouseup事件中执行return false，旨在阻止高版本浏览器中因拖拽操作引发的文字选中现象。利用封装好的addCookie方法，将元素停止拖动时的最终坐标保存至Cookie中；当页面加载时，调用getCookie方法读取该坐标值，并据此重新设置元素位置，从而完成基于Cookie的拖拽位置持久化存储。
HTML与CSS结构配置
HTML结构示例如下：
<div id="drag">拖动我</div>
CSS样式定义如下：
#drag{width: 100px; height: 100px; background: red; position: absolute; top: 0; left: 0;cursor:move;}
JavaScript核心实现代码
JavaScript实现拖拽逻辑的代码如下：
function addCookie(name, value, iDay) {
var oDate = new Date();
oDate.setDate(oDate.getDate() + iDay);
document.cookie = name + '=' + value + '; path=/; expires=' + oDate;
}
function getCookie(name) {
var arr = document.cookie.split('; ');
for (var i = 0; i < arr.length; i++) {
var arr2 = arr[i].split('=');
return (arr2[0] == name) && arr2[1]
}
return '';
}
window.onload = function () {
var oDiv = document.getElementById('drag');
drag(oDiv);
var move_by = getCookie('move_cood');
if (move_by) {
var str = eval('(' + move_by + ')');
oDiv.style.left = str[0] + 'px';
oDiv.style.top = str[1] + 'px';
}
function drag(obj) {
obj.onmousedown = function (ev) {
var oEvent = ev || event;
var disX = oEvent.clientX - obj.offsetLeft,
disY = oEvent.clientY - obj.offsetTop;
document.onmousemove = function (ev) {
var oEvent = ev || event;
obj.style.left = oEvent.clientX - disX + 'px';
obj.style.top = oEvent.clientY - disY + 'px';
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
obj.releaseCapture && obj.releaseCapture();
addCookie('move_cood', '[' + obj.offsetLeft + ',' + obj.offsetTop + ']', 10);
};
obj.setCapture && obj.setCapture();
return false;
};
}
};
上述内容展示了利用原生JavaScript结合Cookie实现拖拽并保存路径的完整效果，希望能为相关学习提供有益参考。