JavaScript实现简单拖拽效果 JavaScript实现简单拖拽效果

本文实例为大家分享了JavaScript实现简单拖拽效果的具体代码，供大家参考，具体内容如下
先看实现的效果：

文章图片

思路：里面用到了三个事件，鼠标按下、移动、松开事件
那么首先创建盒子并且给它赋予css样式
HTML：

// html我是个蓝色的盒子

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、yvar 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、鼠标位置的的计算：鼠标指针的坐标 - (鼠标指针的坐标 - 偏移量) = 实际鼠标拖动的位置
【JavaScript实现简单拖拽效果】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。