本文实例为大家分享了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;
}
然后在JS设置相应的方法
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';
})
注意：
1、想控制某一个盒子的位置，必须给盒子添加定位，否则盒子不会动
2、offsetLeft这个属性是只读的，不能够赋值
3、鼠标位置的的计算：鼠标指针的坐标 - (鼠标指针的坐标 - 偏移量) = 实际鼠标拖动的位置
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持Devmax。