javascript - 保存拖动元素的位置 - JavaScript

Question

我正在尝试创建一个模板，用户可以在其中在房间中拖动可编程物联网项目并保存模板。正如您将在下面的代码中看到的，房间只是一个带有用户已上传到服务器的背景图像的 div 。当用户稍后再次打开页面时，我希望能够将拖动的项目加载到其保存的位置。我了解如何保存数据，但我不知道如何实际计算该项目应以多浏览器兼容格式显示在屏幕上的位置。我使用 jQuery UI 在房间内拖动 IOT 设备。

这是我的 HTML:

<div class="container">
<div class="row">
    <div class="col-md-12">
        <div id="room" class="room" style="background-image:url('<%= url_for(@room.background) %>')">
            <div class="device draggable">
                <div class="content md">

                </div>
            </div>
        </div>
    </div>
</div>
</div>

还有我的 jQuery:

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

Answer 1

您可以在拖动事件中获取x和y坐标并将其保留，如下所示。

$(".draggable").draggable({
    containment: "parent",
    drag: function () {
        var $this = $(this),
            x = this.offsetLeft / (body.clientWidth - $this.width()),
            y = this.offsetTop / (body.clientHeight - $this.height());
    }
});

当用户再次打开页面时，您可以为元素分配 left 和 top 属性。

document.getElementsByClassName("draggable").style.left = (body.clientWidth - $shape.width()) * x + "px";
document.getElementsByClassName("draggable").style.top = (body.clientHeight - $shape.height()) * y + "px";

这里，body 表示window.document.body。这就是我在想要保留位置时计算位置所做的事情，它适用于所有场景，例如浏览器(如果恢复或最大化)以及所有浏览器。