How do I get the coordinate position after using jQuery drag and drop? I want to save the coordinate to a database, so that next time I visit, the item will be in that position. For example, x: 520px, y: 300px?
EDIT:
I am PHP and mysql programmer :)
Is there any tutorial out there?
This question is related to
jquery
drag-and-drop
save
position
$(function() _x000D_
{_x000D_
$( "#element" ).draggable({ snap: ".ui-widget-header",grid: [ 1, 1 ]});_x000D_
});_x000D_
$(document).ready(function() {_x000D_
$("#element").draggable({ _x000D_
containment: '#snaptarget', _x000D_
scroll: false_x000D_
}).mousemove(function(){_x000D_
var coord = $(this).position();_x000D_
var width = $(this).width();_x000D_
var height = $(this).height();_x000D_
$("p.position").text( "(" + coord.left + "," + coord.top + ")" );_x000D_
$("p.size").text( "(" + width + "," + height + ")" );_x000D_
}).mouseup(function(){_x000D_
var coord = $(this).position();_x000D_
var width = $(this).width();_x000D_
var height = $(this).height();_x000D_
$.post('/test/layout_view.php', {x: coord.left, y: coord.top, w: width, h: height});_x000D_
_x000D_
});_x000D_
});
_x000D_
#element {background:#666;border:1px #000 solid;cursor:move;height:110px;width:110px;padding:10px 10px 10px 10px;}_x000D_
#snaptarget { height:610px; width:1000px;}_x000D_
.draggable { width: 90px; height: 80px; float: left; margin: 0 0 0 0; font-size: .9em; }_x000D_
.wrapper_x000D_
{ _x000D_
background-image:linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);_x000D_
height:100%;_x000D_
background-size:45px 45px;_x000D_
border: 1px solid black;_x000D_
background-color: #434343;_x000D_
margin: 20px 0px 0px 20px;_x000D_
}
_x000D_
<!doctype html>_x000D_
<html lang="en">_x000D_
<head>_x000D_
<meta charset="utf-8">_x000D_
<title>Layout</title>_x000D_
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">_x000D_
<script src="//code.jquery.com/jquery-1.10.2.js"></script>_x000D_
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>_x000D_
<link rel="stylesheet" href="../themes/default/css/test4.css" type="text/css" charset="utf-8"/>_x000D_
<script src="../themes/default/js/layout.js"></script>_x000D_
</head>_x000D_
<body>_x000D_
<div id="snaptarget" class="wrapper">_x000D_
<div id="element" class="draggable ui-widget-content">_x000D_
<p class="position"></p>_x000D_
<p class="size"></p>_x000D_
</div>_x000D_
</div> _x000D_
<div></div>_x000D_
</body>_x000D_
</html>
_x000D_
Cudos accepted answer is great. However, the Draggable module also has a "drag" event that tells you the position while your dragging. So, in addition to the 'start' and 'stop' you could add the following event within your Draggable object:
// Drag current position of dragged image.
drag: function(event, ui) {
// Show the current dragged position of image
var currentPos = $(this).position();
$("div#xpos").text("CURRENT: \nLeft: " + currentPos.left + "\nTop: " + currentPos.top);
}
This worked for me:
$("#element1").droppable(
{
drop: function(event, ui)
{
var currentPos = ui.helper.position();
alert("left="+parseInt(currentPos.left)+" top="+parseInt(currentPos.top));
}
});
I was need to save the start position and the end position. this work to me:
$('.object').draggable({
stop: function(ev, ui){
var position = ui.position;
var originalPosition = ui.originalPosition;
}
});
If you are listening to the dragstop or other events, the original position should be a ui parameter:
dragstop: function(event, ui) {
var originalPosition = ui.originalPosition;
}
Otherwise, I believe the only way to get it is:
draggable.data("draggable").originalPosition
Where draggable is the object you are dragging. The second version is not guaranteed to work in future versions of jQuery.
Had the same problem. My solution is next:
$("#element").droppable({
drop: function( event, ui ) {
// position of the draggable minus position of the droppable
// relative to the document
var $newPosX = ui.offset.left - $(this).offset().left;
var $newPosY = ui.offset.top - $(this).offset().top;
}
});
I would start with something like this. Then update that to use the position plugin and that should get you where you want to be.
None of the above worked for me.
Here's my solution- works great:
$dropTarget.droppable({
drop: function( event, ui ) {
// Get mouse position relative to drop target:
var dropPositionX = event.pageX - $(this).offset().left;
var dropPositionY = event.pageY - $(this).offset().top;
// Get mouse offset relative to dragged item:
var dragItemOffsetX = event.offsetX;
var dragItemOffsetY = event.offsetY;
// Get position of dragged item relative to drop target:
var dragItemPositionX = dropPositionX-dragItemOffsetX;
var dragItemPositionY = dropPositionY-dragItemOffsetY;
alert('DROPPED IT AT ' + dragItemPositionX + ', ' + dragItemPositionY);
(Based partly off solution given here: https://stackoverflow.com/a/10429969/165673)
I just made something like that (If I understand you correctly).
I use he function position() include in jQuery 1.3.2.
Just did a copy paste and a quick tweak... But should give you the idea.
// 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>
Source: Stackoverflow.com