JavaScript鼠标拖拽事件详解
本文实例为大家分享了js鼠标拖拽事件的详细实现代码，供大家参考，具体内容如下
图片如下:
css代码
<style>
*{
margin:0;
padding:0;
}
#box{
width: 200px;
height: 200px;
background: url("./img/aio.png") no-repeat;
background-size: cover;
position: absolute;/*定位元素 父级元素window就是初始包含块*/
top:0;
left:0;
}
</style>
html代码
<div id="box"></div>
js代码
<script>
//获取标签
var box=document.getElementById("box");
var body=document.body;
var x,y;//全局作用域
//鼠标按下事件 0级
box.onmousedown=function(e) {//传入形参e
var mx=e.clientX;//鼠标距离浏览器左
var my=e.clientY;//鼠标距离浏览器上
var bx=box.offsetLeft;//盒子距离浏览器左
var by=box.offsetTop;//盒子距离浏览器上
x=mx-bx;//实际盒子距离的浏览器左
y=my-by;//实际盒子距离的浏览器上
//鼠标移动事件 0级
body.onmousemove=function(e) {//拿到全局x、y、
//获取当前鼠标移动到的坐标点
var mx=e.clientX;
var my=e.clientY;
//盒子距离浏览器
box.style.left=mx-x +"px";
box.style.top=my-y +"px";
};
//鼠标弹起事件(松开)
box.onmouseup=function(e) {
body.onmousemove=null;//不做任何操作//dom0级事件解除事件绑定
//获取当前鼠标移动到的坐标点
var mx=e.clientX;
var my=e.clientY;
//盒子距离浏览器
box.style.left=mx-x +"px";
box.style.top=my-y +"px";
}
};
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
拖放（Drag’n’Drop）是一个很赞的界面解决方案。取某件东西并将其拖放是执行许多东西的一种简单明了的方式，从复制和移动文档（如在文件管理器中）到订购（将物品放入购物车）。 在现代 HTML 标准中有一个 关于拖放的部分，其中包含了例如 dragstart 和 dragend 等特殊事件。 这些事件使我们能够支持特殊类型的拖放，例如处理从 OS 文件管理器中拖动文件，并将其拖放到浏览器窗口中。
-
本文向大家介绍JS鼠标拖拽实例分析，包括了JS鼠标拖拽实例分析的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS鼠标拖拽实现方法。分享给大家供大家参考，具体如下： JS代码： 完整代码： 希望本文所述对大家JavaScript程序设计有所帮助。
-
问题内容： 我想通过覆盖JLabel上的鼠标事件来启用JLabel上的拖放功能，但是当我在mousePressed事件中定义拖放时，mouseReleased对该JLabel无效。难道我做错了什么 ？ 缩略图是JLabel的数组 运行该程序时，拖放有效，但不会打印“此处释放鼠标”语句。但是，当我从mousePressed（）方法中删除负责DND的代码时，将打印“此处释放了鼠标”。 这段代码有什么问
-
我尝试了几乎所有的方法，但是鼠标拖动事件没有触发，就像这里解释的那样： https://openjfx.io/javadoc/11/javafx.graphics/javafx/scene/input/MouseDragEvent.html 下面是一个简单的示例，您可以尝试一下（我在JavaFX11.0.2中使用Java11）： 我想通过在或中获取的引用。有许多嵌套窗格等，因为我想保持原来的项目布
-
本文向大家介绍JavaScript事件类型中焦点、鼠标和滚轮事件详解，包括了JavaScript事件类型中焦点、鼠标和滚轮事件详解的使用技巧和注意事项，需要的朋友参考一下 本文针对JavaScript 事件中“事件类型”下“焦点、鼠标和滚轮事件”的注意要点进行整理，分享给大家供大家参考，具体内容如下 一、焦点事件 一般利用这些事件与document.hasFocus()方法和document.ac
-
在本章中，我们将详细介绍鼠标事件及其属性。 请注意：此类事件不仅可能来自于“鼠标设备”，还可能来自于对此类操作进行了模拟以实现兼容性的其他设备，例如手机和平板电脑。 鼠标事件类型 我们已经见过了其中一些事件： mousedown/mouseup 在元素上点击/释放鼠标按钮。 mouseover/mouseout 鼠标指针从一个元素上移入/移出。 mousemove 鼠标在元素上的每个移动都会触发此
-
鼠标事件的种类 鼠标事件指与鼠标相关的事件，继承了MouseEvent接口。具体的事件主要有以下一些。 click：按下鼠标（通常是按下主按钮）时触发。 dblclick：在同一个元素上双击鼠标时触发。 mousedown：按下鼠标键时触发。 mouseup：释放按下的鼠标键时触发。 mousemove：当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该
-
Electron + vue3 + vite 置顶补充: 我用在线的编辑器试了下: https://codepen.io/ZeronoFreya/pen/vYQZZmw 应该不是我的代码有问题……orz 这更不知道该怎么搞了啊 fileDragEl 的全部样式: 基本就这些，效果如图: 鼠标速度并不快，但就是跟不上，为了防止鼠标脱离使用了pointermove，应该不是它的原因吧？但就算是也得用它