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

<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>

Quillbot

一款AI写作润色工具，QuillBot的人工智能改写工具将提高你的写作能力。

1293

查看详情

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`;     }); }