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

Question

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

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

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

Answer 1

我知道这篇文章有些旧，但这是我很久以前创建的一个示例。也许它将帮助其他有相同问题的人。

Link to the fiddle is here.

获取元素位置和大小的jQuery的重要片段在这里

$("#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);
    }
  })