0

jQuerys .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>

これは、より良い説明のためのフィドルです。フィドルでは、インデックスは2のままで、3番目のアプリが移動したときにのみ位置が変わります。

私が望むのは、すべての個々のアプリの位置を取得し、おそらくそれらをクッキー (またはそのようなもの) の配列に保存して、ページが更新されたときに最後の位置にそれらをリロードできるようにすることです。

4

1 に答える 1

3

バニラ 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 セレクター、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で

于 2013-04-26T17:46:57.897 に答える