用js编写,鼠标拖拽特效。

盒子的位置（left和top值）= 鼠标的位置（left和top值）- 鼠标按下时与盒子之间的距离（left和top值）。

编写HTML，设计弹框用于实现拖拽特效。

为拖拽条添加mousedown事件及其处理程序。

处理鼠标移动事件，实现鼠标的拖拽的特效。

处理释放鼠标按键的事件，实现鼠标按钮松开后，弹框不再移动。

css页面代码：

 <style>*{margin: 0;padding: 0;}.box{width: 300px;height: 200px;background-color: #eee;position: absolute;left: 500px;top: 100px;}.box-title{padding: 15px;font-size: 18px;background-color: goldenrod;display: flex;justify-content: space-between;cursor: move;}.box-title .title-icon{width: 50px;height: 24px;border-radius: 24px;color:goldenrod;font-size:14px;background-color:#fff;display: flex;justify-content: center;align-items: center;cursor: pointer;}.box-content{padding: 20px;}

HTML页面代码：

 <div class="box"><div class="box-title">XXX留言<span class="title-icon">关闭</span></div><div class="box-content"><p>内容内容内容内容内容</p></div></div>

JS页面代码：

<script>let _box=document.getElementsByClassName('box')[0];let _box_title=_box.getElementsByClassName('box-title')[0];// 鼠标按键按下事件_box_title.onmousedown=function(e){let _offsetX=e.offsetX;let _offsetY=e.offsetY;document.onmousemove=function(event){let _pageX=event.pageX;let _pageY=event.pageY;let _left=_pageX-_offsetX;let _top=_pageY-_offsetY;_box.style.left=_left+'px';_box.style.top=_top+'px';// 清除文字选中window.getSelection().removeAllRanges();}}document.onmouseup=function(){document.onmousemove=null;}

运行结果如图：

用js编写,鼠标拖拽特效。相关推荐

html点击控制盒子左右移动,JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例...
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例发布时间:2020-10-04 12:47:25 来源:脚本之家阅读:121 作者:s_psycho 本文实例讲述了JS实现鼠标拖拽盒子移动及右键 ...
html 复选框拖拽多选,js实现鼠标拖拽多选功能
最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo: 遮罩出现: 被遮罩盖住的,即为选中的块(背景色为粉色) 下面是具体代码,注释已在文中,与大家交流. 鼠标拖拽多选功能 ...
html div 可鼠标滚动,js实现鼠标拖拽div左右滑动
本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下 Title body{ position: relative; margin:0; padding:0; width ...
用鼠标左右拖拽 html,js实现鼠标拖拽div左右滑动
本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下 Title body{ position: relative; margin:0; padding:0; width ...
JS中鼠标拖拽div（2）（setCapture()方法和releaseCapture()方法）
接着鼠标拖拽div(1)解决问题,当在拖拽事件所在的页面按下键盘的ctrl+A全选后,再去拖拽div,浏览器会默认去搜索网页中的内容,拖拽功能就会失效,(搜索网页内容是浏览器的默认行为,所以要想不发生 ...
JS中鼠标拖拽div(onmousedown、onmousemove、onmouseup)
onmousedown:鼠标的按下事件 onmouseove:鼠标的移动事件 onmouseup:鼠标的松开事件思路: 想实现鼠标拖拽div移动的效果,就得先获取到div,然后给div绑定鼠标按下的 ...
js实现鼠标拖拽功能基本思路
如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒. onmousedown:鼠标按下事件 onmousemove:鼠标移动事件 onmouseup:鼠标抬起事件拖拽的基本原 ...
js实现鼠标拖拽效果
初步 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8&q ...
使用css和js实现鼠标拖尾特效
一实现步骤解析: 1.这原本是一个鼠标后面跟随一串英文字母的效果, 2.后来我就想,运用随机数字母的颜色做成彩色的, 3.并且每一个字母的色彩是随机分配而不是我自己手动填写的. 二 css: 1.为 ...

用js编写,鼠标拖拽特效。

用js编写,鼠标拖拽特效。相关推荐

最新文章

热门文章