jquery:drag後取得物件的座標

詳解

// Make images draggable.
$(“.item”).draggable({

    // Find original position of dragged image.
    start: function(event, ui) {

        // Show start dragged position of image.
        var Startpos = $(this).position();
        $(“div#start”).text(“START: nLeft: “+ Startpos.left + “nTop: ” + Startpos.top);
    },

    // Find position where image is dropped.
    stop: function(event, ui) {

        // Show dropped position.
        var Stoppos = $(this).position();
        $(“div#stop”).text(“STOP: nLeft: “+ Stoppos.left + “nTop: ” + Stoppos.top);
    }
});

<div id=”container”>
    <img id=”productid_1″ src=”images/pic1.jpg” class=”item” alt=”” title=”” />
    <img id=”productid_2″ src=”images/pic2.jpg” class=”item” alt=”” title=”” />
    <img id=”productid_3″ src=”images/pic3.jpg” class=”item” alt=”” title=”” />
</div>

<div id=”start”>Waiting for dragging the image get started…</div>
<div id=”stop”>Waiting image getting dropped…</div>

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料