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

Question

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

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

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

Answer 1

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

$( ".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 调用发送数据，然后执行文件写入操作（此处的帮助取决于后端您选择的技术）。

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

In a Html Application, using javascript, how would I get an image's position on the screen an put it in a text document?

html

javascript

css

jquery

hta