本文介绍如何使用 JavaScript 实现简单的元素拖拽功能。通过监听鼠标按下、移动和松开事件，结合 CSS 定位与 offsetLeft 属性计算，完成盒子位置的动态调整。文中提供了完整的 HTML、CSS 及 JS 代码示例，并指出了定位设置与只读属性赋值等关键注意事项，适合前端初学者参考学习。
JavaScript 实现简单拖拽效果教程
本文分享了一段使用 JavaScript 实现简单拖拽效果的完整代码示例，供读者参考学习。
首先展示最终实现的交互效果。
实现该功能的核心逻辑依赖于三个鼠标事件：鼠标按下、鼠标移动以及鼠标松开。
第一步是创建用于拖拽的容器元素，并为其配置相应的 CSS 样式。
HTML 结构代码如下。
// html
<div>
<p>我是个蓝色的盒子</p>
</div>对应的 CSS 样式定义如下。
CSS
*{margin: 0;padding: 0;}
div{
width: 100px;
height: 100px;
background-color: cornflowerblue;
position: absolute;
}
p{
width: 100px;
height: 100px;
line-height: 100px;
font-size: 10px;
color: #fff;
text-align: center;
transition: .5s all;
}
p:hover{
transform: translateY(-5px);
transition: .5s all;
box-shadow: 10px 10px 5px gray;
}接下来在 JavaScript 中编写处理拖拽逻辑的方法。
var div = document.querySelector('div');
var p = document.querySelector('p');
// 先定义初始化变量x、y
var x =0;
var y = 0;
// var i = 3;
var TorF= false;
//盒子里的文字无法被选中
div.onselectstart = function (e) {
return false;
}
div.addEventListener('mousedown',function(e){
// client：鼠标按钮时输出鼠标指针的坐标
x = e.clientX;
y = e.clientY;
// 格式：obj.offsetLeft:获取左和上的偏移量
// 在这里特别说明一下:这个属性是只读的，不能够赋值。
// 返回当前元素距离父元素(body)左边的距离
// 这里的l，t并不是声明了一个全局变量，而是创建了一个全局对象的属性。
l = div.offsetLeft;
t = div.offsetTop;
// 鼠标设置移动箭头
div.style.cursor = 'move';
p.innerHTML = '我被按下了 ^_^';
TorF= true;
});
// 当整个屏幕触发移动事件时
document.addEventListener('mousemove',function(e){
// 如果为false则终止函数的执行并返回函数的值
if (Torf == false) {
return;
}
// 在此函数中定义局部变量
var twox = e.clientX;
var twoy = e.clientY;
// 用获取到的鼠标指针的坐标 - (鼠标指针的坐标 - 偏移量) = 实际鼠标拖动的位置
// 后面一定要加上px单位，因为本身获取是没有单位的
var twol = twox - (x-l);
var twot = twoy - (y-t);
div.style.left = twol+'px';
div.style.top = twot+'px';
p.innerHTML = '我正在被拖动 -.-';
});
div.addEventListener('mouseup',function(){
// 松开键盘时停止鼠标移动事件
TorF= false;
// 鼠标恢复默认样式
div.style.cursor = 'default';
p.innerHTML = '我被弹开了QAQ';
})在编写代码时，需注意以下几个关键点。
第一，若要控制特定盒子的位置变化，必须为其添加定位属性（如 absolute），否则盒子将无法发生位移。
第二，offsetLeft 属性仅用于读取元素偏移量，它是只读的，不能直接进行赋值操作。
第三，关于鼠标位置的计算逻辑：实际拖动位置等于鼠标指针坐标减去初始偏移量，即（鼠标指针坐标 - (鼠标指针坐标 - 偏移量)）得出最终位置。
以上就是本文的全部内容，希望能为读者的学习提供有益帮助，欢迎大家继续支持本站。