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>