私はドラッグ可能な div を持っています。私がやりたいことは、ドラッグされてからが送信された後、ページ上の div の場所をキャプチャできるようにすることです。
ページがリロードされたときに、その div が最後にあった場所にレンダリングされるようにする予定です。
今のところ私の質問は、div をページ上でドラッグした後、div がどこにあるかの座標または場所をどのようにキャプチャできるかということです。
ここに私のコードがあります:
<script type="text/javascript">
$(document).ready(function()
{
$("#filterItem").click(function() {
$("#filterPanel").fadeToggle("slow", function() {
toggleImg( 'filter' );
});
$(this).toggleClass("active");
toggleImg( "filter" );
return false;
});
$("#filterPanel").draggable({ snap: "#filterItem" });
$("#mgmtViewHeaders [title]").tooltip();
});
function closeDraggablePanel( panelName, topPos)
{
$("#"+panelName+"Panel").toggle("slow", function() {
toggleImg( 'filter' );
// Reposition to default
$("#"+panelName+"Panel").css( "top", topPos);
$("#"+panelName+"Panel").css( "left", "25");
});
}
HTML:
<c:set var="filterTop" value="150" scope="page"/>
<div id="filterDiv">
<ul class="sideMenu" style="top: ${filterTop}px;">
<li style="border-bottom: none;">
<div id="filterItem" class="sideMenuDiv"><span><img src="../images/plus.gif" /> Filters</span>
</div>
</li>
</ul>
</div>
<%-- Y coordinate of the top edge of the filter panel. --%>
<c:set var="panelTop" value="${filterTop}" scope="page"/>
<div class="sideMenuPanel" style="display: none; width: 290px; top: ${panelTop}px;" id="filterPanel">
</div>