javascript - 获取多个元素的位置

Question

我正在尝试使用 jQuery 的 .position 和 .each 函数获取多个可拖动元素的单独位置。

这就是我到目前为止所拥有的......

JS

function newAppDraggable() {
    $('.App').draggable({
        containment: "#AppBox",
        grid: [ 60, 60 ],
        stack: ".App"
    });
};

$(function() {
    $('.AppList').droppable({
        accept: ".App",
        tolerance: 'fit',
        drop: function(event, ui) {
            $(".App").each(function( index ) {
            var position = $(this).position();
            var posTop = position.top;
            var posLeft = position.left;
            $( "#posThis" ).html(index+":"+posTop+":"+posLeft);
            });
        }
    });
});

HTML

<div class="AppList">
    <div id="TimenDate" class="App Fixed Size110x350">
    </div>

    <div id="User" class="App Fixed Size110x290">
    <p id="posThis"></p>
    </div>

    <div id="Weather" class="App Fixed Size110x350">
    </div>
</div>

这是一个fiddle为了更好的解释。在 fiddle 上，索引保持在 2，并且位置仅在移动第三个应用程序时发生变化。

我想要的是能够获取所有单独应用程序的位置，并可能将它们保存在 cookie(或类似的东西)中的数组中，以便我可以在页面打开时将它们重新加载到最后的位置已刷新。

Answer 1

在普通 JavaScript 和支持 element.getBoundingClientRect 的现代浏览器中

以下两个示例均经过修改，以演示如何将每个元素获得的位置添加到数组中，以便稍后访问。

您可以通过此技术获取位置信息。

var apps = document.querySelectorAll(".App"),
    positions = [];

Array.prototype.forEach.call(apps, function (app, index) {
    var positionInfo = app.getBoundingClientRect();

    positions.push(positionInfo);
    console.log(index + ":" + positionInfo.top + ":" + positionInfo.left);
});

console.log(positions);

关于jsfiddle

在上面的示例中，浏览器还必须支持 Array.forEach和 document.querySelectorAll

使用jquery，会是这样的，使用jQuery selectors , jQuery.each和 jQuery.position

var apps = $(".App"),
    positions = [];

$.each(apps, function (index, app) {
    var positionInfo = $(app).position();

    positions.push(positionInfo);
    console.log(index + ":" + positionInfo.top + ":" + positionInfo.left);
});

console.log(positions);

关于 jsfiddle