Box bordered in Red is my Droppable div area. which is having image set as background
Box bordered in Blue is my Draggable div Area which contains pointer pin image which can be dropped to droppable region
one of Dropped pointer is shown by Black Arrow
Here is 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 achieve following functionality.
1) User can drop Pointer pin on Droppable region.
2) Once a Pointer pin is dropped on Droppable region I will read Pointer pin’s Left Top position using jQuery function .position
3) Then those Left and Top Value I am storing in Database by making jQuery ajax call.
4) Then another page get all pointer position from the DB and show those pointer on the same image where the Pointer were dropped.
Issue Facing
When I read all pointer position from the Database and show those pointer on the image with respective Left Top position
Pointer is not get placed where it was dropped
Now the code for both page are same means I render pointer position on the same page where it was dropped.
its showing as following Image
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) { }
}
}
});
});
Code is very complex I am posting sample to get and Idea
Here is all code javascript
<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>
You should not get the position starting at the code which you did nothing. The draggable position is retrieved inside the drop event:
Hope this help 🙂