javascript 拖动实例

Myth丶恋晨 2024-02-17 15:15 40阅读 0赞

<html>
        <head>
        </head>
        <body>
            <div id="myDiv" style="position:absolute;background:red;width:500px;height:500px;">abc</div>
            <script type="text/javascript">
                var mydiv = null;
                var offleft = 0;
                var offTop = 0;
                document.onmousedown = function(event){
                    mydiv = document.getElementById("myDiv");
                    offleft = event.clientX - mydiv.offsetLeft;
                    offTop = event.clientY - mydiv.offsetTop;
                }
                document.onmousemove = function(event){
                    if(mydiv !=null){
                        console.log(event.clientX,event.clientY);
                        mydiv.style.left = event.clientX - offleft + "px";
                        mydiv.style.top = event.clientY - offTop + "px";
                    }
                }
                document.onmouseup = function(event){
                    offleft = 0;
                    offright = 0;
                    mydiv = null;
                }
            </script>
        </body>
    </html>

利用了事件冒泡，已经DOM0事件触发。

发表评论取消回复

表情：

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

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

相关阅读

相关 jQuery UI 实例 - 拖动（Draggable）

允许使用鼠标移动元素。如需了解更多有关 draggable 交互的细节，请查看 API 文档 [可拖拽小部件（Draggable Widget）][Draggable Wi

末蓝、/ 2024年03月24日 16:05/ 0 赞/ 75 阅读

相关 javascript 拖动实例

<html> <head> </head> <body> <div id="myDiv" sty

Myth丶恋晨/ 2024年02月17日 15:15/ 0 赞/ 41 阅读

相关 javascript 实现图片拖动

javascript实现图片拖动效果并不难，主要的思路如下 1：给图片绑定监听鼠标按下对象，设置拖动属性为true 2：鼠标抬起：拖动属性为false 鼠标移动：

骑猪看日落/ 2023年06月04日 04:59/ 0 赞/ 31 阅读

相关 JavaScript网页制作--拖动模态框

JavaScript网页制作–拖动模态框在注册页面，经常会有点击注册弹出一个注册框的情况，有时注册框遮挡住下面信息，需要看到下面信息时，可以拖动注册框。（初学JS，这部

r囧r小猫/ 2022年12月27日 08:35/ 0 赞/ 195 阅读

相关一个简单的滑块拖动验证码实例

![e60f92b5f7fb37be4d8ce3aa7c3f493e.png][] 使用这种验证方法的目的：证明当前的用户不是机器人~防止恶意操作。实现思路：

矫情吗；*/ 2022年10月05日 02:54/ 0 赞/ 272 阅读

相关 Javascript 如何实现对象的拖动

解决思路这个效果并不算常见，通常用于游戏或个人站点中。因为拖曳是靠鼠标来操作的，所以对鼠标的位置的捕获是问题的重点，然后才是根据鼠标的位置设置层的位置。具体

阳光穿透心脏的1/2处/ 2022年09月18日 04:55/ 0 赞/ 140 阅读

相关拖动滑动

<a href="http://download.csdn.net/detail/linjiqian/9713492">示例源码下载CSDN http://downlo

缺乏、安全感/ 2022年06月01日 09:08/ 0 赞/ 196 阅读

相关 JavaScript鼠标拖动图片

<!DOCTYPE html> <html> <head> <style type='text/css'> img { position

深藏阁楼爱情的钟/ 2022年05月16日 00:12/ 0 赞/ 420 阅读

相关 JavaScript实现拖动滑块验证（方法已封装）

前提之前写了一篇博文，题目是[《JavaScript实现拖动滑块验证》][JavaScript]，里面都是用最简单的方式实现的。后来，群里大神推荐了一款`unlo

叁歲伎倆/ 2022年05月11日 20:16/ 0 赞/ 386 阅读

相关 jquery经典实例之拖动面板

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

ゝ一世哀愁。/ 2021年07月24日 18:55/ 0 赞/ 387 阅读