js 实现简单拖拽

最新推荐文章于 2024-07-21 13:38:37 发布

爱生活，爱编程

最新推荐文章于 2024-07-21 13:38:37 发布

阅读量201

点赞数

分类专栏： javascript基础笔记

本文链接：https://blog.csdn.net/qq_15009739/article/details/109768942

版权

本文介绍了如何使用JavaScript实现简单的拖拽功能。主要步骤包括在down事件中计算位移dx和dy，在move事件中更新元素的left和top值，以及在up事件中清理相关操作。虽然存在一些不足，但可以通过查阅并修改他人代码（如CSDN资源）来完善。

摘要由CSDN通过智能技术生成

<!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>Document</title>
</head>

<body>

    <div class="drag" style="width: 100px ;height:100px;position:absolute;left:10px;top:10px;background:pink">


    </div>


    <script>
        window.onload = function() {
            var oDrag = document.querySelector(".drag");
            // var offsetLeft = oDrag.offsetLeft;
            // var offsetTop = oDrag.offsetTop;
            var dx = 0;
            var dy = 0;

            oDrag.addEventListener("mousedown", function(e) {
                var offsetLeft = oDrag.offs