图像区域内可拖动元素及坐标获取教程

<p>点击并按住鼠标左键拖动椭圆，或者通过表单输入X和Y值来更新位置：</p>

<!-- 坐标输入表单 (可选，用于联动) -->
<form name="form01">
    <label>X: <input name="x" type="text" /></label>
    <label>Y: <input name="y" type="text" /></label>
</form>

<!-- 放置目标区域 -->
<div id="drop">
    <!-- 背景图像 -->
    <img src="https://www.pngkey.com/png/full/8-80588_car-cartoon-png-group-picture-pollution-voiture-png.png" width="400" />

    <!-- 可拖动的椭圆容器 -->
    <div id="mydiv" draggable="true">
        <!-- 包含椭圆的SVG -->
        <svg viewBox="0 0 6 6" width="20" height="20" xmlns="http://www.w3.org/2000/svg">
            <g data-id="00000000-0000-0000-0000-000000000000" class="draggable">
                <ellipse cx="3" cy="3" rx="3" ry="3" />
            </g>
        </svg>
    </div>
</div>

body {
    /* 页面内边距，用于展示getBoundingClientRect()的正确性 */
    padding: 10px 0 0 20px;
}

#drop {
    position: relative; /* 关键：使内部绝对定位元素相对于此容器定位 */
    /* 可以设置宽度、高度或由内部图像撑开 */
}

#mydiv {
    position: absolute; /* 关键：相对于#drop进行绝对定位 */
    z-index: 9;
    text-align: center;
    cursor: move; /* 鼠标悬停时显示移动光标 */
    left: 0; /* 初始位置 */
    top: 0; /* 初始位置 */
}

#mydiv ellipse {
    fill: green; /* 设置椭圆填充颜色 */
}

// 获取DOM元素
var mydiv = document.getElementById("mydiv");
var drop = document.getElementById("drop");
var form = document.forms.form01; // 获取表单元素

// 监听拖动开始事件
mydiv.addEventListener('dragstart', e => {
    // 存储拖动数据：元素ID和鼠标相对于元素左上角的偏移量
    let data = JSON.stringify({
        id: e.target.id,
        x: e.offsetX, // 鼠标相对于拖动元素左上角的X坐标
        y: e.offsetY  // 鼠标相对于拖动元素左上角的Y坐标
    });
    e.dataTransfer.setData("text/plain", data);
});

// 监听拖动经过放置目标事件
drop.addEventListener('dragover', e => {
    e.preventDefault(); // 阻止默认行为，允许放置
    e.dataTransfer.dropEffect = "move"; // 设置拖动效果
});

// 监听放置事件
drop.addEventListener('drop', e => {
    e.preventDefault(); // 阻止默认行为，如打开链接等

    // 获取拖动开始时存储的数据
    let data = JSON.parse(e.dataTransfer.getData("text/plain"));
    let draggedElement = document.getElementById(data.id);

    // 获取放置目标（#drop）相对于视口的位置和大小
    let dropRect = drop.getBoundingClientRect();

    // 计算拖动元素相对于放置目标的新位置
    // e.clientX/Y 是鼠标相对于视口的坐标
    // data.x/y 是鼠标相对于拖动元素左上角的偏移量
    // dropRect.x/y 是放置目标相对于视口左上角的坐标
    let relX = e.clientX - data.x - dropRect.x;
    let relY = e.clientY - data.y - dropRect.y;

    // 限制拖动范围在图像区域内
    // 获取图像的实际宽度和高度（假设图像与drop容器同宽）
    const imageWidth = drop.querySelector('img').width;
    const imageHeight = drop.querySelector('img').height;
    const elementWidth = draggedElement.offsetWidth;
    const elementHeight = draggedElement.offsetHeight;

    relX = Math.max(0, Math.min(relX, imageWidth - elementWidth));
    relY = Math.max(0, Math.min(relY, imageHeight - elementHeight));

    // 更新表单值 (如果存在)
    if (form) {
        form.x.value = relX;
        form.y.value = relY;
    }

    // 更新拖动元素的位置
    draggedElement.style.left = `${relX}px`;
    draggedElement.style.top = `${relY}px`;

    console.log('relative pos:', `${relX},${relY}`);
    // 在此处可以将 relX 和 relY 发送到后端数据库进行存储
    // 例如：通过 AJAX 请求发送到 ASP.NET Core MVC 控制器
});

// 监听表单输入变化，更新椭圆位置 (可选)
if (form) {
    form.addEventListener('change', e => {
        let x = parseInt(form.x.value);
        let y = parseInt(form.y.value);

        // 获取图像的实际宽度和高度
        const imageWidth = drop.querySelector('img').width;
        const imageHeight = drop.querySelector('img').height;
        const elementWidth = mydiv.offsetWidth;
        const elementHeight = mydiv.offsetHeight;

        // 限制输入范围在图像区域内
        x = Math.max(0, Math.min(x, imageWidth - elementWidth));
        y = Math.max(0, Math.min(y, imageHeight - elementHeight));

        // 更新表单值（确保限制后的值显示在表单中）
        form.x.value = x;
        form.y.value = y;

        // 更新椭圆的位置
        mydiv.style.left = `${x}px`;
        mydiv.style.top = `${y}px`;
    });
}