jquery-ui-droppable

I have a list of photos, and I have draggable added to them, however when the photo is dragged outside of the parent div, I want to change it's class so it indicates that if you drop it, it will be removed, and then when the user drops it, I want it to fire a function. (only if it is outside of the parent div) <ul class="photos"> <li><img src=""/></li> <li><img src=""/></li> </ul> so when an li is dragged outside of .photos, it fires to add class, and then if it's dropped outside of it, then it fires and event to remove it. Assuming the parent div you mention is a droppable, you can bind an

I am trying to drag and drop and element onto a droppable area. Let's say that I have multiple droppable areas with the same class and I have written a drop event handler for this class . If I scale down my droppable areas using -webkit-transform:scale(0.3,0.3); , the drop event acts weird. The drop happens onto muliple droppable zones before the draggable element gets attached to one of the droppable areas. I assume that this issue is because of using the scale but I don't have any idea on how to fix it. Googling didn't help either. I have set up a fiddle for DEMO . Here is my code THE SCRIPT

I have an arrangement of elements on a page: <div> <div class="dragdrop" style="top:0px; left: 0px; ">1</div> <div class="dragdrop" style="top:40px; left: 0px; ">2</div> <div class="dragdrop" style="top:60px; left: 0px; ">3</div> <div class="dragdrop" style="top:0px; left: 100px;">4</div> <div class="dragdrop" style="top:40px; left: 100px;">5</div> <div class="dragdrop" style="top:60px; left: 100px;">6</div> </div> How can I use jQuery UI (Draggable / Droppable) to make it so that if one div is dropped onto another, they swap positions? (And if it's dragged anywhere else, it reverts back to

I have several draggable & droppable elements on my page, which have accept properties. Currently my code is set up like: $(".answer." + answer).draggable({ revert: "invalid" , snap: ".graph" }); $(".graph." + graph).droppable({ accept: ".answer." + answer }); Therefore if the answer isn't correct, its reverted to its original position. The user also needs the ability to reset all on the page. I've tried the following, but it doesn't work: $("btnReset").click(function(){ $(".graph.A").draggable({revert:true}); }); Since there's no built-in method to do what you need, you'd have to simulate the

I actually have two questions, the on in the title being the main one. I have multiple div elements on the page marked as droppable. Inside these div elements I have spans that are marked as draggable. I want it so when you are dragging an element and it is hovered over a droppable area that area either highlights or has a border so they know they can drop it there. As secondary question, all my draggable elements have a display:block, a width and a float on them, so they look nice and neat in my droppable areas. When items are dropped they seem to get a position set to them as they no longer

Change html when drop element in droppable area. Something like this: http://the-stickman.com/files/jquery/draggable-sortable.html But when I drop element change placed html. Other Example: I have 2 lists first draggable list and second droppable list, when i drag element from a first list and i drop this element into a second list, the element will be cloned to the second list dragging: <a href="#">test</a> drop: <a href="#">test</a> i want to change this html to dragging: <a href="#">test</a> drop: <div class="toggle"><a href="#">test</a></div> Check this DEMO http://jsfiddle.net/yeyene