javascript - 在 Html 应用程序中，使用 javascript，如何获取图像在屏幕上的位置并将其放入文本文档中？

Question

我有几个图像，具有不同的 id，使用 jquery ui draggble div 代码:

$( function() {
$( "#t" ).draggable();
} );

如何获取图像所在的 x 和 y 坐标(左:px；上:px；在 css 中)并将其放入文本文档中？

Answer 1

使用 jQuery UI，您可以在“停止”事件上获得元素的位置，该事件在拖动停止时触发。

$( ".selector" ).draggable({
  stop: function( event, ui ) {
    // Here, on the ui object, you have both position and offset
    // See below for an explanation of the difference
  }
});

要检索元素的位置，相对于偏移父元素，您应该使用 position() api。如果您想要相对于文档的位置，您应该使用offset() api。

jquery 文档:

When positioning a new element on top of an existing one for global manipulation (in particular, for implementing drag-and-drop), .offset() is more useful.

在这两种情况下，您都可以使用点语法来获取特定的方向偏移或位置:

$('#test').offset().left;
$('#test').offset().top;
// -----
$('#test').position().left;
$('#test').position().top;

为了将该信息存储到文件中，您可能需要一个 API，您可以在其中通过 ajax 调用发送数据，然后执行文件写入操作(此处的帮助取决于您选择的后端技术)。