jquery-ui-draggable

I'm attempting to have the dragged element detect where it's hovering over on the stop event for the jQuery's UI draggable function. Here is my attempt, however to no avail: $(".artwork").draggable({ stop: function(e, ui){ ui.mouseover(function(f){ if(f.target.id == "wall") { alert("yes!"); } }); } }); I'm not too sure I fully understand how I'd be able to detect what element I'm hovering over on the drag's stop event. Thanks! You might want to check droppable 's over event. $(".droppable").droppable({ over: function (event, ui) { var yourCurrentlyHoveredElement = $(this); //the 'this' under

EDIT: I Trimmed this question down, and put it on See how it's the original and not the new item that gets altered http://jsfiddle.net/mikkelbreum/DBG5q See how the dragged helper gets altered, but the element reverts back once it's dropped. http://jsfiddle.net/mikkelbreum/dpTC8 I've got a draggable list linked to a sortable list When I drag from draggable to sortable I use a cloned helper, so the original is still left in draggable collection. each time I drag a clone from the draggable list to the sortable list, I want to give the new copy a unique headline (manipulate it's h2 element). I

How to prevent draggable child elements from dragging over each other in absolute position? Something like: if( ($("#firstChild").position().left) >= ($("#secondChild").position().left) ) { $(this).draggable({ disabled: true }); } but this only disables dragabble when stop dragging, the goal is to prevent from overdragging in some way...Or with Droppable??? Any ideas for CASE 2? EDIT: Also, this is maximum for child1 towards child2 , so no overlap occurs , but child1 can push child2 on right, and child2 can push child1 on left, important thing is that no overlap ocurrs! Some notes before / in

I work with this example from jQuery UI Sortable I have a problem with drag and drop. Table number 3 - sortable3 should only be able to receive one item. This is my HTML <div class="demo"> <ul id="sortable1" class='droptrue'> <li class="ui-state-default">Can be dropped..</li> <li class="ui-state-default">..on an empty list</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li> </ul> <ul id="sortable2" class='dropfalse'> <li class="ui-state-highlight">Cannot be dropped..</li> <li class="ui-state-highlight">..on an empty

I want some images to drop in a targeted area as many times as possible. But the image drops for only one time. My jQuery UI code: $(function() { $( ".draggable img").draggable({ revert: "invalid", appendTo: "#droppable", helper: "clone" }); $( "#droppable" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", drop: function( event, ui ) { $( this ).find( ".placeholder" ).remove(); var image = $(".ui-draggable"); $( "<img />" ).image.src.appendTo( this ); } }); }); Please see the demonstration here: jsFiddle example From the example you see that the image drops in the