JavaScript实现鼠标拖动方块

最新推荐文章于 2022-09-04 19:55:43 发布
最新推荐文章于 2022-09-04 19:55:43 发布
阅读量2.4k 收藏 2
点赞数
CC 4.0 BY-SA版权
文章标签： javascript osx function html div email
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xuanner/article/details/1756647
本文介绍了一个简单的JavaScript实现，允许用户通过鼠标拖动网页上的元素。该功能通过监听鼠标按下、移动和释放事件来实现，并更新元素的位置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

作者:  xuanner  发布日期: 2007-8-23 23:21:01  Email:chenxuan5627@163.com

---------------------------------------------------------------------------------------------------------------

(原创作品，转载请保留作者著作信息)

<html>
    <head>
        <title>用鼠标移动纸条</title>
        <script language="JavaScript">
        <!--
        var blnCanMove = false;
        var osX = 0;
        var osY = 0;
        function startMove() {
            if(blnCanMove) {
                event.srcElement.style.left = event.clientX - osX;
                event.srcElement.style.top = event.clientY - osY;
                
                mvPage.innerHTML = "(" + event.clientX + "," + event.clientY + ")";
            } else {
                event.returnValue = false;
            }
        }
        
        function stopMove() {
            if(blnCanMove) {
                blnCanMove = false;
                event.returnValue = false;
            }
        }
        function initMoveInfo() {
            if(event.button == 1) {
            //如果是按下了鼠标左键
                osX = event.offsetX;
                osY = event.offsetY;
                blnCanMove = true;
                event.srcElement.style.zIndex += 1;
            } else {
                blnCanMove = false;
            }
            event.returnValue = false;
        }
        //-->
        </script>
    </head>
    
    <body>
    
    <div id="mvPage" style="position: absolute; left: 10px; top: 10px; height: 100px; width: 200px; background-image: url('./number/0.gif');" onmousedown="initMoveInfo();" onmousemove="startMove();" onmouseup="stopMove();">

    </div>
    
    <br><br><br>
    <div id="mvPage1" style="position: absolute; left: 10px; top: 10px; height: 100px; width: 200px; background: springgreen;" onmousedown="initMoveInfo();" onmousemove="startMove();" onmouseup="stopMove();">

    </div>
</body>
</html>
xuanner
关注
js 拖拽方块
A-Select °
04-04 312
示图(有兴趣的可以拖拽下试试)： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...
Js实战之方块跟随鼠标移动
weixin_44278828的博客
10-09 527
方块跟随鼠标移动 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>方块跟随鼠标移动</title> <style type="text/css"> #box1 { width: 100px; height: 100px; background-
js实现方块上下左右移动效果
10-19
主要为大家详细介绍了js实现方块上下左右移动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
鼠标拖动小方块（js监听器）
TISRNW的博客
10-25 463
代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0rem; padding: 0rem; } h...
JS 方块拖拽
weixin_53836578的博客
02-26 247
css html源代码 js代码 效果 点击按住不放可以随意拖拽
js拖动多个方块
weixin_34088838的博客
08-20 147
合并方块，类似于qq空间好友管理的拖动效果== View Code 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <HTML XMLNS:ELEMENT> 3 <html> 4 <head> 5 <title>:...
HTML5 Canvas鼠标拖动方块弹性动画特效
06-11
这款"HTML5 Canvas鼠标拖动方块弹性动画特效"利用了Canvas的API，结合鼠标事件，实现了用户可以交互地拖动方块，并观察到方块在释放后有如糖果或果冻般的弹跳效果。 首先，我们要理解Canvas的基本结构。在HTML中，`...
JavaScript实现可拖拽的拖动层Div实例
12-02
JavaScript实现的可拖拽Div是Web开发中常见的一种交互功能，它允许用户通过鼠标操作页面上的元素，使其在页面上自由移动。以下是对这个实例的详细解析： 首先，我们需要了解HTML、CSS和JavaScript的基本概念。HTML...
JavaScript鼠标拖拽事件详解
10-15
JavaScript中的鼠标拖拽事件是创建交互式用户界面的重要部分，特别是在网页中移动或操作元素时。在本例中，我们将详细讲解如何实现一个简单的图片拖拽功能，这将涵盖`onmousedown`, `onmousemove`, 和 `onmouseup` ...
Html+Javascript 创建方块加拖动示例
qq_44849953的博客
04-01 430
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <style type="text/css"> p{ background-color: lightblue;/*背景色*/ text-align: center;/*居中*/ font-size:50px;/*字体大小设置*/ user-select:none;/*无法选中*/ } .box{
js网页中随意拖动的小方块实现代码
10-30
用CSS和JS制作的在网页中可以随意拖动的小方块。
js实现方块的拖拽
qq_42168476的博客
08-09 434
拖拽一个小方块，代码如下： class Drag{ constructor(){ this.box = document.getElementById("box"); this.getPos(); this.addEvent(); } getPos(){ this.box.style.left = (localStorage.getItem("left") || 0) + "px"; this.box.s
JS写一个可拖动方块
KindleYoung的博客
12-10 417
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
方块拖动
Frost666的博客
06-28 669
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; #fk{ width: 50
js方块拖拽（复杂版）
HuangJiaxinZ的博客
05-27 667
js封装 方块拖拽（复杂版） 我的主页也有简单的版本 Document <script> var div = document.getElementsByTagName('div')[0]; //事件监听事件 （自己封装的函数 解决不同浏览器兼容性问题） function addEvent...
js案例一 :方块拖动效果
weixin_51040108的博客
09-04 847
js案例一 :方块拖动效果
JavaScript实现鼠标拖动滑块
IvyQiao的专栏
02-01 1290
HTML代码： slide #longDiv{ height:4px; width:500px; background-color:#666; position:absolute; top:200px;left:100px;} #slideDiv{height:20px; width:20px; background-color:#000; position: absolute; t
原生js实现鼠标拖拽,解决方块跑出问题
方寸间的博客
05-15 1443
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
jquery拖拽方块效果
marie0119
02-13 628
div{ width: 100px; height: 100px; background: #fc0; position: absolute; } $(function(){ var x=0; var y=0; $('div').mousedown(function(ev){ x=ev.pageX-$(this).offset().left; y=ev.pageY
实现仿Igoogle拖动DIV效果的JavaScript技术
- HTML文件中可能包含了一个或多个DIV元素，它们被设计为可以通过鼠标拖动来移动。 - 通过查看和分析这个HTML文件，可以学习如何实现拖动功能，并进一步理解该功能的具体实现细节。 ### 实现拖动DIV的技术细节 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值