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

爱被打了一巴掌 2022-12-31 01:15 265阅读 0赞

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

**有图有代码！**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1][]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>html5学习(鼠标跟随和拖拽)</title>
    <link rel="stylesheet" type="text/css" href="../css/inputAndDiv.css">
    </head>
    <body style="background-color: #CCE8CF;">
    <div id="test1" style="width: 50px;height: 50px;background-color: #5F04B4;position: absolute;">
    </div>
    </body>
    <script type="text/javascript">
    //鼠标跟随
    var divNode = document.getElementById("test1");
    divNode.onmousedown = function() {
    	document.onmousemove = function(ev) {
    // 		console.log(ev);
    // 		console.log(divNode);
    		divNode.style.left = ev.clientX + "px";
    		divNode.style.top = ev.clientY + "px";
    	}
    }
    </script>
    </html>

**完！**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70]: /images/20221120/8c672685b6204d708bb66f9277b529c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1]: /images/20221120/1ac33998d62a40caa4f7aed7e5552c3a.png

发表评论取消回复

表情：

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

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

相关阅读

相关 HTML_如何实现鼠标拖拽div元素

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

待我称王封你为后i/ 2023年02月24日 03:53/ 0 赞/ 21 阅读

相关 html5学习(文件拖拽上传)

> html5文件拖拽上传,有图有代码！文件拖拽的核心代码不多，如下可做参考： divNode.ondrop = function(e) { e.pre

淩亂°似流年/ 2022年12月31日 02:25/ 0 赞/ 154 阅读

相关 html5学习(鼠标拖拽)

> html5鼠标拖拽的效果和案例温故知新，许久之前写的html5的案例，重新整理了下，算是知识复习和回顾吧！ ![watermark_type_ZmFuZ3poZW

曾经终败给现在/ 2022年12月31日 01:26/ 0 赞/ 217 阅读

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

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

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

相关 HTML5鼠标拖拽灯泡点亮js特效

[下载地址][Link 1] HTML5鼠标拖拽灯泡点亮特效是一款html5基于svg绘制的卡通灯泡，鼠标拖拽灯泡电源线开灯关灯动画特效。 ![933ee6f78b720e

淡淡的烟草味﹌/ 2022年08月28日 04:53/ 0 赞/ 157 阅读

相关 HTML5拖拽效果

drag and drop(拖拽) 拖拽元素事件 : 事件对象为被拖拽元素 dragstart : 拖拽前触发 drag :拖拽前、拖拽结束之间

末蓝、/ 2022年07月19日 12:40/ 0 赞/ 288 阅读

相关 HTML5——drag拖拽

1. 给标签元素添加属性：draggable = “true”，该元素即可被拖拽，任何元素都可以被拖拽特点：拖走的是灵魂 ![70][] 2. 事件（1）可拖拽元素

桃扇骨/ 2022年05月11日 07:28/ 0 赞/ 388 阅读

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

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

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

相关 HTML5学习笔记（五）拖拽操作

一、拖拽效果要拖拽的文件是什么? - 源元素要拖拽到哪里去? - 目标元素目前实现拖拽效果的方法

柔情只为你懂/ 2022年04月17日 00:55/ 0 赞/ 265 阅读

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

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

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