获取多个元素的位置

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 以获得更好的解释。在小提琴上，索引保持在 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