JS在页面渲染一个div,用鼠标点击鼠标随意拖动该元素，当鼠标松开时，该元素会停在鼠标松开的页面位置。

<style>#goods {width: 100px;height: 100px;border-radius: 50%;position: fixed;background-color: greenyellow;}</style><body><script>// 让元素跟随鼠标移动let goods = document.createElement('div');document.body.appendChild(goods);goods.setAttribute('id', 'goods')goods.onmousedown = function (e) { // 给元素绑定鼠标按下事件// 当鼠标按下时，获取鼠标相对于元素的坐标let mousedownX = e.offsetX;let mousedownY = e.offsetY;document.onmousemove = function (event) {// 当鼠标移动时，获取鼠标移动的坐标let mousemoveX = event.clientXlet mousemoveY = event.clientY// 把鼠标移动的位置重新赋值给 元素的位置  并且减去鼠标在元素上按下时的初始坐标可以让元素一直处于移动状态goods.style.left = (mousemoveX - mousedownX) + 'px'goods.style.top = (mousemoveY - mousedownY) + 'px'}}// 在新位置 结束移动事件，让元素停在新位置document.onmouseup = function () {// 删除鼠标的移动事件document.onmousemove = null;}</script>

JS在页面渲染一个div,用鼠标点击鼠标随意拖动该元素，当鼠标松开时，该元素会停在鼠标松开的页面位置。相关推荐

原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏...
<!DOCTYPE html> <html style="font-size: 24px"> <head><title>js点击按钮 ...
解读Tapestry5.1——页面渲染
本文旨在介绍Tapestry5.1的页面渲染(render)过程,希望最终能给出一个完整清晰的页面渲染流程,以便大家能更好的理解Tapestry页面渲染的过程,构架出更漂亮的Tapestry组件. 页 ...
将html页面中部分div 导出为word ，纯前端处理，解决word导出视图问题
1.加入两个外部js FileSaver.js /* FileSaver.js* A saveAs() FileSaver implementation.* 1.3.2* 2016-06-16 18: ...
html 让其中一个div浮在另一个div上面
html 让其中一个div浮在另一个div上面通常情况下,有两种实现方法:(1) 浮动的元素设置float属性 (2) 浮动的元素设置position属性为 absolute, 另一个元素设置pos ...
使用OpenGL渲染一个三角形
OplenGL的功能是什么?这里文中给出了介绍:In OpenGL everything is in 3D space, but the screen and window are a 2D arra ...
退出图标html css 实现,用一个div画出关闭图标
今天实现一个用一个div来实现关闭按钮图标,其中主要用到的技巧:css3伪元素:before,:after,css3的transform:rotate(),同时让该图标居中,此次是用了flex弹性布 ...
python开发的录音机（二）让鼠标点击与开始录音同步（录制与回放鼠标宏）
当我们用录音机录网上的音乐时,有一个场景让人困扰: 比如听以下页面中的一首歌,要在页面上点击一下播放按钮如果想把这一首歌录下来,当点击了播放按钮再去点录音机的录音按钮时,中间有一个时间差.可能一不小 ...
关于鼠标连续点击脚本的分享
下面我提供一个Python语言的示例代码,可以在Windows操作系统下实现鼠标的连续点击: import time import random import win32api, win32con d ...
Unity3d使用鼠标点击控制人物走动无效的问题
Unity3d使用鼠标点击控制人物走动无效的问题最近在自学Unity3d,在学到使用鼠标点击控制人物走动时,按照API上面将代码写好,如下: void Update () {// _clickLis ...

JS在页面渲染一个div,用鼠标点击鼠标随意拖动该元素，当鼠标松开时，该元素会停在鼠标松开的页面位置。

JS在页面渲染一个div,用鼠标点击鼠标随意拖动该元素，当鼠标松开时，该元素会停在鼠标松开的页面位置。相关推荐

最新文章

热门文章