The box with the Red frame is my Droppable area. which has an image set as background
The box with the Blue frame is my area of the Draggable div, which contains an icon image that can be dropped to droppable . > area
one of the discarded pointer is shown by a black arrow
Here is the code
<body> <div id="Droppable" class="ui-ui-corner-all"> Drop Area</div> <div id="Draggable" class="ui-ui-corner-all"> <img class="draggableItem" id="Item1" src="Images/pointer.png" alt="" /> <div class="draggableItem" id="Item2"> <img src="Images/pointer.png" alt="" /> </div> <div class="draggableItem" id="Item3"> <img src="Images/pointer.png" alt="" /> </div> <div class="draggableItem" id="Item4"> <img src="Images/pointer.png" alt="" /> </div> <div class="draggableItem" id="Item5"> <img src="Images/pointer.png" alt="" /> </div> <div class="draggableItem" id="Item6"> <img src="Images/pointer.png" alt="" /> </div> </div>
I want to perform the following functions.
1) The user can reset the pointer of the pointer in the Droppable area.
2) As soon as the pointer pincher is reset in the Droppable area, I will read the position of the top left position of the pointer using the jQuery function. position
3) Then those Left and Top Value I store in the database , creating a jQuery ajax call.
4) Then another page gets the entire position of the pointer from the database and shows this pointer in the same image where the pointer was dropped.
Window problem
When I read the position of the pointer from the database and show that pointer in the image with the corresponding upper left position
The pointer does not fit where it was reset
Now the code for both pages is the same as rendering the position of the pointer on the same page on which it was deleted.
as it shown on the picture
Javscript code
$(document).ready(function () { $(".draggableItem").draggable(); $("#Droppable").droppable({ drop: function (event, ui) { //my business logic var droppablesPos = //Read dropped item postion using jQuery .position() $.ajax({ type: "POST", url: "/Feature/SavePointer", datatype: "json", traditional: true, data: { "Left": droppablesPos.Left, "Top": droppablesPos.Top}, success: function (result) { //return message to user }, error: function (req, status, error) { } } } }); });
The code is very complicated. I am sending a sample to receive and Idea
Here is all the javascript code
<script type="text/javascript"> $(document).ready(function () { $(".draggableItem").draggable(); var droppablesPos = $("#Droppable").position(); var dr = $("#Droppable").offset(); alert("pos Left:" + droppablesPos.left + " " + "Top:" + droppablesPos.top); alert(" offest Left:" + dr.left + " " + "Top:" + dr.top); $("#Droppable").droppable({ drop: function (event, ui) { $("#" + ui.draggable.attr("id").toString() + "").addClass("droppedItemClickable"); } }); $(".draggableItem").click(function () { var titleName = $(this).attr("id"); var droppedItemPosition = $(this).offset(); if ($(this).is(".droppedItemClickable")) { $("#dailog").dialog({ width: 480, height: 400, title: titleName }); $("#FeatureId").val(titleName); $("#FeatureTopPosition").val(droppedItemPosition.top); $("#FeatureLeftPosition").val(droppedItemPosition.left); } }); $("#featureSubmit").click(function () { var FeatureId = "1"; var FeatureName = $("#featureName").val(); var FeatureDescription = $("#featureDescription").val(); $.ajax({ type: "POST", url: "/Builder/SaveFeature", datatype: "json", traditional: true, data: { "featureId": FeatureId, "featureName": FeatureName, "featureDescription": FeatureDescription }, success: function (result) { alert(result); $(control).val(result.toString()); }, error: function (req, status, error) { } } ); alert("Feature Submited Successfully..."); $("#dailog").dialog("close"); }); $("#featureCancel").click(function () { $("#dailog").dialog("close"); }); function ret() { return false; } });
and HTML
<div id="Droppable" class="ui-ui-corner-all"> Drop Area</div> <div id="Draggable" class="ui-ui-corner-all"> <img class="draggableItem" id="Item1" src="../../Images/pointer.png" alt="" /> <div class="draggableItem" id="Item2"> <img src="../../Images/pointer.png" alt="" /> </div> <div class="draggableItem" id="Item3"> <img src="../../Images/pointer.png" alt="" /> </div> <div class="draggableItem" id="Item4"> <img src="../../Images/pointer.png" alt="" /> </div> <div class="draggableItem" id="Item5"> <img src="../../Images/pointer.png" alt="" /> </div> <div class="draggableItem" id="Item6"> <img src="../../Images/pointer.png" alt="" /> </div> </div> <br /> <div id="dailog" class="hidden"> <form method="post" action="/Builder/UploadFeature" enctype="multipart/form-data"> <div class="editor-label"> <%: Html.LabelFor(model => model.FeatureId) %> </div> <div class="editor-field"> <%: Html.EditorFor(model => model.FeatureId)%> <%: Html.ValidationMessageFor(model => model.FeatureId)%> </div> <div class="editor-label"> <%: Html.LabelFor(model => model.FeatureName) %> </div> <div class="editor-field"> <%: Html.EditorFor(model => model.FeatureName) %> <%: Html.ValidationMessageFor(model => model.FeatureName) %> </div> <div class="editor-label"> <%: Html.LabelFor(model => model.FeatureDesc) %> </div> <div class="editor-field"> <%: Html.EditorFor(model => model.FeatureDesc) %> <%: Html.ValidationMessageFor(model => model.FeatureDesc) %> </div> <input type="file" name="ImageUploaded" /> <div class="editor-label"> <%: Html.LabelFor(model => model.FeatureLeftPosition)%> </div> <div class="editor-field"> <%: Html.EditorFor(model => model.FeatureLeftPosition)%> <%: Html.ValidationMessageFor(model => model.FeatureLeftPosition)%> </div> <div class="editor-label"> <%: Html.LabelFor(model => model.FeatureTopPosition)%> </div> <div class="editor-field"> <%: Html.EditorFor(model => model.FeatureTopPosition)%> <%: Html.ValidationMessageFor(model => model.FeatureTopPosition)%> </div> <input type="submit" onclick="ret()" /> </form> </div>