如何使用 jQuery UI 获取可拖动和可调整大小元素的坐标答案

【问题标题】：How to get coordinates of draggable and resizable elements using jQuery UI如何使用 jQuery UI 获取可拖动和可调整大小元素的坐标
【发布时间】：2020-06-12 23:48:31
【问题描述】：

我想为响应式图像映射生成多个坐标（左、上、宽、高）。在管理界面中，允许在图像上创建、移动和调整大小的矩形。我能够在图像上多次创建、可移动和可调整大小的矩形并将坐标值保存到数据库中。在使用数据库保存坐标填充图像地图的用户界面中但矩形位置在桌面和移动浏览器视图中均未正确显示。

这是我的源代码 Jsfiddle。在图像上完成矩形绘制后，请点击运行按钮并将鼠标悬停在图像上查看渲染的地图区域（矩形）。

JSFiddle: https://jsfiddle.net/sridharnetha/8mryxgf2/6/

【问题讨论】：

最好在您的帖子中添加一些代码。这使其他人可以更轻松地查看问题，而无需点击指向小提琴的链接。
要获取top和left，可以使用.position()或.offset()。对于width 和height，分别使用.width() 或.outerWidth() 和.height()。

标签： jquery jquery-ui jquery-ui-draggable imagemap jquery-ui-resizable

【解决方案1】：

我知道这篇文章有点老了，但这是我很久以前创建的一个示例。也许它会帮助其他有同样问题的人。

Link to the fiddle is here.

jQuery获取元素位置和大小的重要sn-p在这里

$("#draggable").draggable({
    // ...
    drag: function(event, ui) {
      console.log($(event.target).width() + " x " + $(event.target).height());
      console.log(ui.position.top + " x " + ui.position.left);
    },
    stop: function(event, ui) {
      console.log($(event.target).width() + " x " + $(event.target).height());
      console.log(ui.position.top + " x " + ui.position.left);
    }
  })
  .resizable({
    // ...
    resize: function(event, ui) {
      console.log(ui.size.width + " x " + ui.size.height);
      console.log(ui.position.top + " x " + ui.position.left);
    },
    stop: function(event, ui) {
      console.log(ui.size.width + " x " + ui.size.height);
      console.log(ui.position.top + " x " + ui.position.left);
    }
  })

此外，了解width、innerWidth 和outerWidth 的区别也很重要。 See more details here.

【讨论】：