asked on

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">
<html>
<head>
<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; }
	</style>
	<script>
		$(document).ready(function () {
			});
	</script>
	
</head>
<body>
	<div id="divContainer">
		
		<div id="divToolbox"><style type="text/css">
	.ui-state-active { border-style:solid; border-width:1px; border-color:green; }
</style>

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

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

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

Open in new window

Anyone any ideas what im doing wrong?

ASKER CERTIFIED SOLUTION

tonelm54

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial