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

Question

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

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

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

Answer 1

使用jQuery UI，您可以在＆＃34; stop＆＃34;上找到元素的位置。事件，在拖动停止时触发。

$( ".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 docs：

  

将新元素定位在现有元素的顶部时   操纵（特别是用于实现拖放），   .offset（）更有用。

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

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

要将该信息存储到文件中，您可能需要一个API，您可以通过ajax调用发送数据，然后执行文件编写（这里的帮助取决于您选择的后端技术）。