当前位置：首页 > 行业动态 > 正文

div中拖拽js

admin
行业动态
2025-02-11
7

“

javascript，// 示例：使用原生JavaScript实现div元素拖拽功能，document.querySelector('#draggable').addEventListener('mousedown', function(e) {， let shiftX = e.clientX this.getBoundingClientRect().left;， let shiftY = e.clientY this.getBoundingClientRect().top;， moveAt(e.pageX, e.pageY); function moveAt(x, y) {， this.style.position = 'absolute';， this.style.left = x shiftX + 'px';， this.style.top = y shiftY + 'px';， } document.addEventListener('mousemove', moveAt);， document.addEventListener('mouseup', () => {， document.removeEventListener('mousemove', moveAt);， }, { once: true });，});，

“

在现代网页设计中，实现拖拽功能可以极大地提升用户体验，通过JavaScript和HTML5的Drag and Drop API，我们可以让元素在页面上被拖动，从而实现动态交互效果，下面将详细介绍如何在<div>元素中实现拖拽功能。

基本步骤

1、设置可拖拽元素：

我们需要在HTML中定义一个可拖拽的元素，例如一个<div>。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag and Drop Example</title>
    <style>
        #draggable {
            width: 100px;
            height: 100px;
            background-color: #4CAF50;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="draggable">Drag me</div>
    <script src="script.js"></script>
</body>
</html>

2、添加事件监听器：

我们在JavaScript中为该元素添加必要的事件监听器，包括dragstart,drag, 和drop事件。

document.addEventListener('DOMContentLoaded', function() {
    const draggable = document.getElementById('draggable');
    draggable.addEventListener('dragstart', function(event) {
        event.dataTransfer.setData('text/plain', '');
        setTimeout(function() {
            draggable.style.opacity = '0.5';
        }, 0);
    });
    draggable.addEventListener('dragend', function(event) {
        setTimeout(function() {
            draggable.style.opacity = '1';
        }, 0);
    });
    let offsetX, offsetY;
    draggable.addEventListener('mousedown', function(event) {
        offsetX = event.clientX draggable.getBoundingClientRect().left;
        offsetY = event.clientY draggable.getBoundingClientRect().top;
    });
    document.addEventListener('mousemove', function(event) {
        if (draggable.matches(':active')) {
            draggable.style.left = event.pageX offsetX + 'px';
            draggable.style.top = event.pageY offsetY + 'px';
        }
    });
});

3、样式调整：

div中拖拽js