Welcome to the interactive Pointer Pin application!
The red-bordered box is where you can drop your Pointer Pins. This area has a background image set.
The blue-bordered box is where you can drag various Pointer Pins from. These pins can be dropped into the red droppable region.
A black arrow represents a Dropped Pointer Pin.
Below is a snippet of the HTML code used:
<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>
This application aims to achieve the following objectives:
1) Allows users to drop Pointer Pins onto the Droppable region.
2) Upon dropping a Pointer Pin, its Left Top position is captured using jQuery's position function and stored in a database via AJAX call.
3) The saved positions are retrieved and displayed on another page aligned with their original placement.
Issue Encountered:
Despite rendering the pointer positions where they were dropped initially, an offset discrepancy is present.
To address this issue, code samples have been provided that help understand how positioning data is managed in the application.
JavaScript Functionality:
$(document).ready(function () {
$(".draggableItem").draggable();
$("#Droppable").droppable({
drop: function (event, ui) {
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) { }
});
});
});
Please note, this code serves as a simplified overview to illustrate key functionalities.
For further insights, refer to the complete JavaScript and HTML snippets below:
<script type="text/javascript">
...
</script>
<div id="Droppable" class="ui-ui-corner-all">
Drop Area</div>
...
</div>
...