Droppable Problem

[adam84]

Hi, I am having trouble getting the Droppable to work correctly. With the code I have provided, what happens is when I drag my 'task' over to the 'Tuesday DIV', it automatically returns to the 'Monday DIV', where it started. What I want to achieve is to have the task move if they drag it into the 'Tuesday DIV', if its anywhere else, I want it to go back to the location it started at. Any guidance, what I am missing to get this to work?

 

My Javascript

		$(function() {
			$( "#task" ).draggable({ revert: "invalid" });


			$( "#tuesdayDIV" ).droppable({
					accept: "#task",
				activeClass: "ui-state-hover",
        				hoverClass: "ui-state-active",
				drop: function(){
					   var targetElem = $(this).attr("id");
            						$( this )
                					.addClass( "ui-state-highlight" );
				}     				
			});
		});

 

My HTML

				<div name="mondayDIV" id="mondayDIV" class="droppable ui-widget-header">
					<div name="task" id="task" class="ui-widget-content"><p>
						<div class="soNumber"> 16523</div>
						<div class="soTime">5.00 hrs </div></p>
					</div>
				</div>

				<div name="tuesdayDIV" id="tuesdayDIV" class="droppable ui-widget-header">
				</div>