dragable final

Im trying to detect the final drop position of a dragged object, after a bit of googleing Ive been informed to use the method stop in the draggable setup, however when I use it in my code, it always alerts out "Final X: 30 Final Y: 34"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Page</title>
	<script src="jquery-1.9.1.js"></script>
	<script src="jquery.ui.core.js"></script>
	<script src="jquery.ui.widget.js"></script>
	<script src="jquery.ui.mouse.js"></script>
	<script src="jquery.ui.position.js"></script>
	<script src="jquery.ui.draggable.js"></script>
	<script src="jquery.ui.droppable.js"></script>
	<style type="text/css">
		body { margin: 0; padding: 0; background-color: #FFFFFF; color: #000000; }

		#divContainer { background-color: #6495ED; position:absolute;text-align:left;left:30px;top:0px;width:1024px;height:704px;z-index:2; }
			#divToolbox { background-color: #ADFF2F; position:absolute;text-align:left;left:0px;top:34px;width:230px;height:240px;z-index:4; }
			#divPreviewContainer { background-color: #ADFF2F; position:absolute;text-align:left;left:235px;top:34px;width:551px;height:662px;z-index:0; }
			#divPreview{ background-color: #ffffff; position:absolute;text-align:left;left:0px;top:0px;width:551px;height:662px;z-index:0; }
		$(document).ready(function () {
	<div id="divContainer">
		<div id="divToolbox"><style type="text/css">
	.ui-state-active { border-style:solid; border-width:1px; border-color:green; }

	<img id="tlbTest" src="test.png" alt="Test" class="toolDragable"/>

	$(document).ready(function () {
			helper: "clone",
			stop: function(){
				var finalOffset = $(this).offset();
				var finalxPos = finalOffset.left;
				var finalyPos = finalOffset.top;

				alert('Final X: ' + finalxPos + "<br/>" + 'Final Y: ' + finalyPos);
			activeClass: 'ui-state-hover',
			hoverClass: 'ui-state-active',
			accept: '.toolDragable'
</script>		</div>	
		<div id="divPreviewContainer">
			<div id="divPreview" class="allowTools">

Open in new window

Anyone any ideas what im doing wrong?
Who is Participating?
tonelm54Connect With a Mentor Author Commented:
Ive discovered the issue is with
helper: "clone"
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.