Laravel  
laravel
文档
数据库
架构
入门
php技术
    
Laravelphp
laravel / php / java / vue / mysql / linux / python / javascript / html / css / c++ / c#

js draggable

作者:冷宸枫   发布日期:2025-02-21   浏览:107

// HTML部分
<div id="draggable" style="width: 100px; height: 100px; background-color: red; position: absolute;">
    Drag me!
</div>

// JavaScript部分
document.addEventListener('DOMContentLoaded', function () {
    let isDragging = false;
    let offsetX, offsetY;
    const draggableElement = document.getElementById('draggable');

    // 鼠标按下事件
    draggableElement.addEventListener('mousedown', function (e) {
        isDragging = true;
        offsetX = e.clientX - draggableElement.offsetLeft;
        offsetY = e.clientY - draggableElement.offsetTop;
    });

    // 鼠标移动事件
    document.addEventListener('mousemove', function (e) {
        if (isDragging) {
            const x = e.clientX - offsetX;
            const y = e.clientY - offsetY;
            draggableElement.style.left = `${x}px`;
            draggableElement.style.top = `${y}px`;
        }
    });

    // 鼠标释放事件
    document.addEventListener('mouseup', function () {
        isDragging = false;
    });
});

解释说明:

  1. HTML部分:创建了一个 div 元素,设置了宽度、高度、背景颜色,并将其定位为绝对位置(position: absolute),以便可以通过修改其 lefttop 样式属性来改变其位置。
  2. JavaScript部分
    • 监听 DOMContentLoaded 事件,确保 DOM 完全加载后再执行代码。
    • 添加了 mousedownmousemovemouseup 事件监听器来实现拖拽功能。
    • 当用户按下鼠标时 (mousedown),记录当前鼠标位置与元素左上角的偏移量 (offsetX, offsetY),并设置 isDraggingtrue
    • 在鼠标移动 (mousemove) 时,如果 isDraggingtrue,则根据鼠标的当前位置更新元素的位置。
    • 当用户释放鼠标 (mouseup) 时,将 isDragging 设置为 false,停止拖拽。

上一篇:js 获取dom高度

下一篇:nodejs webpack

大家都在看

js 数组对象排序

js 数组删掉第一个值

js fill

js 数组复制

js 复制数组

js 数组拷贝

js 对象转数组

js 深拷贝数组

js 获取今天年月日

js jsonp

Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3

Laravel 中文站