3 questions on jQueryUI drag and drop

tonelm54
tonelm54 used Ask the Experts™
on
I trying to figure a way of detecting the final dropped position of image on the div its been dropped onto.

Ive discovered that I have an issue with helper where my code pulls the value of the first object, and not the dragged which is my first question, how can I detect the cloned final position?

My second (which is linked to the first) is I dont know how to find its dropped position on the dropped div. Currently I only have 1 droppable div, but in the final product Ill have many more, so need to pull the id from the dropped div.

My 3rd issue is after plently of googleing I cannot understand how to revert if its not dropped over a droppable area.

My current code is:-
<!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


If anyone can help me answer any of my questions, I would appreciate it.

Thank you
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Manager / Solutions Architect
Commented:
Basically you're using the wrong functionality.
jQueryUI give us 2 kind of similar tools: Draggable and Droppable.

You're using Draggable that is only used to drag objects around... move them from one place to the other.
On the other hand, Droppable has the functionality you want, that actually adds functionlity on top of Draggable, letting the object "know" where it's being dragged into and where.

If you have a look at these examples on the official jqueryUI website you'll have the answer to all your questions: http://jqueryui.com/droppable/

Cheers!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial