javascript - 在用户提交时使用 jQuery 提交 HTML 和 CSS 坐标和值

Question

我正在开发一个网络应用程序，用户可以在其中将文本拖放到图像上。理想情况下，我希望我的用户能够使用覆盖文本保存他们的图像。为此，我计划使用 PIL(Python 图像库)在后端重新创建图片。

在提交 HTML 表单时，我想发送 img 四个 Angular 的坐标值、任何覆盖文本的坐标以及它们的十六进制颜色和字体大小。

是否可以使用 jQuery 或 JavaScript 捕获所有这些？

在这个 JS Fiddle 中，http://jsfiddle.net/booyaa/YvJhE/文本是可拖动的。假设用户将文本移到图像上。为了重新创建图像(使用用户拖动的文本)，我需要文本被拖动到的位置的坐标。是否可以使用 jQuery 为 HTML 元素设置 X Y 坐标？

<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
</div>
<img src="http://imgur.com/JS1HXFw.jpg">

$( "#draggable" ).draggable();

---

$("#capture").click(
    function(event) {
        var photoCoords = $("img").position();
    })

我在控制台中为 var photoCoords 设置了未定义。知道为什么吗？

Answer 1

你可以使用

 $(selector).offset();

或

 $(selector).position();

获取元素的坐标。同时 offset给你相对于元素的坐标，position为您提供相对于元素的偏移父元素的坐标。

在您提供的示例中，两者都将返回与 #draggable 的偏移父级完全相同的值实际上是正文，它相对于您的文档位于 0,0 处。

据我了解，在您的用例中，您可能希望同时获得 #draggable的和图像的 offset并将其传递给服务器。通过比较两个元素的坐标(top 和 left)，您可以轻松确定它们的相对位置，并且应该具备创建相关组合图像的所有条件。

• > jQuery docs on position
• > jQuery docs on offset