JavaScript简单拖拽事件（鼠标跟随事件）

骑猪看日落 2022-05-11 05:18 278阅读 0赞

# 本例演示简单来说分为两步： #

第一步：鼠标按下时的事件对象操作。

第二步：鼠标移动时对事件对象的操作。

<style>  
            \*\{margin: 0;  
                padding: 0;  
            \}  
            \#box\{width: 100px;height: 100px;background: \#CCC;border: 1px solid \#999;position: absolute;  
                    top: 100px;left: 500px;text-align: center;line-height: 100px;cursor: move;  
            \}  
          
</style>  
<div id="box">想要去哪？</div>  
<script type="text/javascript">  
            var oBox =document.getElementById("box");  
            oBox.onmousedown = function(ev)\{  
                ev =ev ||event;  
                var oLeft = oBox.offsetLeft;  
                var oTop = oBox.offsetTop;  
                var a =ev.clientX-oLeft;  
                var b =ev.clientY-oTop;  
                oBox.onmousemove =function (ev)\{  
                    ev = ev || event;  
                    oBox.style.left =ev.clientX-a+'px';  
                    oBox.style.top =ev.clientY-b+'px';  
                \}  
            \}      
              
            document.onmouseup =function()\{  
                oBox.onmousemove =function()\{  
                    null;  
                \}  
            \}  
          
</script>

发表评论取消回复

表情：

评论列表（有 0 条评论，278人围观）

还没有评论，来说两句吧...

相关阅读

相关前端------拖拽事件

拖拽事件在H5中实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽可以传递数据。放置元素:默认是不可以放置得取消默认行为 even

阳光穿透心脏的1/2处/ 2024年04月07日 11:39/ 0 赞/ 111 阅读

相关 Qt实现鼠标拖拽事件

Qt实现鼠标拖拽事件鼠标拖拽是一种常见的用户交互操作，它允许用户通过按下鼠标左键并移动来拖动对象或改变窗口大小。在Qt框架中，我们可以轻松地实现鼠标拖拽事件。本文将介绍如何

骑猪看日落/ 2024年03月09日 03:01/ 0 赞/ 152 阅读

相关 JS 拖拽事件

1.drag等拖拽事件 > 拖放是由拖动与释放两部分组成，拖放事件也分为被拖动元素的相关事件，和容器的相关事件。被拖动元素的相关事件如下所示：被拖动元素相关事件:

蔚落/ 2024年03月02日 10:40/ 0 赞/ 93 阅读

相关 html5学习(鼠标跟随和拖拽)

温故知新，以下是我以前写的html5的案例，从电脑中翻出来了，算是知识复习和回顾吧！有图有代码！ ![watermark_type_ZmFuZ3poZW5naGVpdGk

爱被打了一巴掌/ 2022年12月31日 01:15/ 0 赞/ 272 阅读

相关 [JavaScript]写一个鼠标拖拽元素事件

<style> div { width: 300px; height: 200px; background-color: pink; position: fixed;

女爷i/ 2022年12月08日 05:00/ 0 赞/ 192 阅读

相关 2021-09-20 WPF上位机 35-鼠标事件和拖拽事件

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b6u6L2vTVZQI

旧城等待，/ 2022年09月12日 04:43/ 0 赞/ 210 阅读

相关 js实现拖拽事件

HTML <body> <div></div> </body> CSS div{ position: absolute

「爱情、让人受尽委屈。」/ 2022年05月29日 08:24/ 0 赞/ 332 阅读

相关鼠标跟随事件

<html> <head> <title></title> </head> <body> <script> A=doc

╰半橙微兮°/ 2022年05月18日 00:56/ 0 赞/ 323 阅读

相关 JavaScript简单拖拽事件（鼠标跟随事件）

本例演示简单来说分为两步：第一步：鼠标按下时的事件对象操作。第二步：鼠标移动时对事件对象的操作。 <style> \\{margin

骑猪看日落/ 2022年05月11日 05:18/ 0 赞/ 279 阅读

相关 JavaScript经典案例之按下拖拽、跟随鼠标移动

<!DOCTYPE html> <html> <head lang="en"> <meta charset="GBK">

￡神魔★判官ぃ/ 2021年07月24日 21:46/ 0 赞/ 450 阅读