jQuery UI拖拽对象坐标：点击获取、展示及存储技术问询

你遇到的核心问题是变量作用域限制：position变量是在draggable的drag回调函数内部定义的局部变量，外部的myFunction1根本访问不到它。下面给你两种可靠的解决方案，还会附带如何把坐标传递到你的调查程序的思路。

方案1：点击按钮时直接获取当前位置（推荐） #

这种方法不需要依赖拖拽过程中的临时变量，每次点击按钮都直接读取元素的实时位置，更稳定——即使元素没被拖拽过，也能拿到初始坐标。

只需要修改你的myFunction1函数：

function myFunction1() {
  // 直接获取拖拽元素的当前位置
  const currentPosition = $('#dragMe').position();
  const xPos = currentPosition.left;
  const yPos = currentPosition.top;
  
  // 弹窗展示坐标
  alert(`The position is X: ${xPos}, Y: ${yPos}`);
  
  // 这里可以把坐标保存到你的调查程序
  // 示例1：存到隐藏输入框，方便表单提交
  // document.getElementById('survey-x').value = xPos;
  // document.getElementById('survey-y').value = yPos;
  // 示例2：直接调用调查程序的API
  // fetch('/survey/submit', { 
  //   method: 'POST', 
  //   body: JSON.stringify({x: xPos, y: yPos}) 
  // });
}

方案2：全局变量存储坐标（适合实时跟踪拖拽过程） #

如果你需要在拖拽过程中实时更新坐标，同时按钮点击也能获取最新值，可以把坐标变量提升到全局作用域：

// 定义全局变量存储坐标
let globalX = 0;
let globalY = 0;

$('#dragMe').draggable({
  containment: $('body'),
  drag: function(){
    const position = $(this).position();
    // 更新全局变量
    globalX = position.left;
    globalY = position.top;
    $('#positionX').text('positionX: ' + globalX);
    $('#positionY').text('positionY: ' + globalY);
  },
  // 其他配置保持不变
  accept: '#dragMe',
  over : function(){
    $(this).animate({'border-width' : '5px', 'border-color' : '#0f0' }, 500);
    $('#dragThis').draggable('option','containment',$(this));
  }
});

function myFunction1() {
  // 使用全局变量展示坐标
  alert(`The position is X: ${globalX}, Y: ${globalY}`);
  
  // 保存到调查程序的逻辑和方案1一致
}

完整修改后的代码（整合方案1） #

下面是可以直接使用的完整代码，已经修复了作用域问题：

<html>
<head> 
<style>
#container { width: 100%; height: 400px; background-image: url('http://www.unisg.bplaced.net/park2.png'); background-repeat: no-repeat; background-size: contain; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 7px; touch-action: none; }
#dragMe { width: 100px; height: 300px; background-image: url('http://www.unisg.bplaced.net/silhoutte3.png'); background-size: 100px 300px; background-repeat: no-repeat; border-radius: 2em 2em 2em 2em; position: absolute; top: 10%; left: 20%; }
#dropMe { width: 12em; height: 12em; padding: 0.5em; margin: 0 auto; }
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
<style type="text/css">
.as-console-wrapper { position: fixed; bottom: 0; left: 0; right: 0; max-height: 150px; overflow-y: scroll; overflow-x: hidden; border-top: 1px solid #000; display: none; }
.as-console { background: #e9e9e9; border: 1px solid #ccc; display: table; width: 100%; border-collapse: collapse; }
.as-console-row { display: table-row; font-family: monospace; font-size: 13px; }
.as-console-row:after { display: table-cell; padding: 3px 6px; color: rgba(0,0,0,.35); border: 1px solid #ccc; content: attr(data-date); vertical-align: top; }
.as-console-row + .as-console-row > * { border: 1px solid #ccc; }
.as-console-row-code { width: 100%; white-space: pre-wrap; padding: 3px 5px; display: table-cell; font-family: monospace; font-size: 13px; vertical-align: middle; }
.as-console-error:before { content: 'Error: '; color: #f00; }
.as-console-assert:before { content: 'Assertion failed: '; color: #f00; }
.as-console-info:before { content: 'Info: '; color: #00f; }
.as-console-warning:before { content: 'Warning: '; color: #e90 }
@-webkit-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@-moz-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@-ms-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
.as-console-row-code, .as-console-row:after { -webkit-animation: flash 1s; -moz-animation: flash 1s; -ms-animation: flash 1s; animation: flash 1s; }
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="container">
<div id="dragMe" class="ui-draggable ui-draggable-handle" style="position: relative; ">
<p>You</p>
</div>
<div id="dropMe"></div>
<script type="text/javascript">
$('#dragMe').draggable( {
containment: $('body'),
drag: function(){
var position = $(this).position();
var xPos = position.left;
var yPos = position.top;
$('#positionX').text('positionX: ' + xPos);
$('#positionY').text('positionY: ' + yPos);
},
accept: '#dragMe',
over : function(){
$(this).animate({'border-width' : '5px', 'border-color' : '#0f0' }, 500);
$('#dragThis').draggable('option','containment',$(this));
}
});
function myFunction1() {
  // 直接获取当前位置
  const currentPos = $('#dragMe').position();
  const coords = `X: ${currentPos.left}, Y: ${currentPos.top}`;
  alert(`The position is ${coords}`);
  
  // 示例：保存到调查程序的隐藏字段
  // <input type="hidden" id="survey-x" name="coordX">
  // <input type="hidden" id="survey-y" name="coordY">
  // document.getElementById('survey-x').value = currentPos.left;
  // document.getElementById('survey-y').value = currentPos.top;
}
</script>
<button onclick="myFunction1()">Click me</button>
<div class="as-console-wrapper"><div class="as-console"></div></div>
</body>
</html>

关于保存到调查程序的补充 #

如果你的调查程序是表单驱动的，最简单的方式是添加两个隐藏<input>元素，点击按钮时把坐标赋值给它们，提交表单时就会自动携带这些数据：

<!-- 在<body>中添加隐藏输入框 -->
<input type="hidden" id="survey-x" name="coordX">
<input type="hidden" id="survey-y" name="coordY">

然后在myFunction1中补充赋值逻辑即可。如果是API驱动的调查程序，直接用fetch发送POST请求，把坐标作为JSON数据传递就行。

内容的提问来源于stack exchange，提问作者tobias sch