droppable

I'm trying to make some educational site and one of the things I want to have the students do is drag items to an area before being able to proceed to the next stage. I was thing the way to do this was use the jquery droppables script and have the items draggable option disable when it is dropped in the droppable div. Then I was going to add 1 to a variable, when it gets to the right number the button to advance would be enabled. The problem is that I can't figure out how to make the droppable function work only for each particular draggable. So what I have is: $(document).ready(function() { $

My fiddle: http://jsfiddle.net/Yc9WY/42/ What you'll see here are two groups, each with 3 droppable containers defined. You can move events from group 1 to group 2, and into any slot. This works just fine. Once a group is full, I would like to give the user the ability to sort that group by moving events up and down. They should still be able to move the event out of the group if they choose however. You'll see my commented out code where I began to integrate the sortable library, but am getting odd behavior. Note: I cannot replace my draggable/dropable with sortable solely. I need explicitly

I have my draggable and droppable setup correctly using jquery-ui. They are both the same size, so the draggable should fit nicely on to the droppable. Is there any way to make the draggable snap in to the middle of the droppable so as to completely cover it? It seems if I use the snap: parameter it just snaps to the edges, and not necessarily to the middle of the droppable. Would this not do the job, give or take a pixel: drop: function(event, ui) { $(ui.draggable).offset($(this).offset()); } Or since you're already using jQuery UI, there's the position method drop: function(event, ui) { ui

I am trying to use jQuery sortable, droppable and draggable to work together. I have 3 lists: a break-point placeholder; report rows; report groups. The user should be able to: Drag as many placeholder copies into the 'report rows' list Drag one-at-a-time a single 'report group' (not a clone) into the 'report rows' collection (but not vice-verse)...until no more report groups are left. The user should be able to sort the report rows list ad nauseum. My problem is... I cannot get Number 2 above to work Side Note: I really did try to create a jsFiddle for this but couldn't get jsFiddle to

I'm a bit new to jQuery and hope somebody can help me out. I'm trying to change an element (li) to another element (div) after the (li) has been dropped. Sample code: $("#inputEl>li").draggable({ revert: true, opacity: 0.4, helper: "clone" }); $("#dropEl") .droppable({ accept: ".drag", hoverClass: "dropElhover", drop: function(ev, ui) { // change the li element to div here } }); The problem is, when i use drop: function(ev, ui) { $(ui.draggable).replaceWith("<div>Some content</div>"); } the original draggable elements will be disabled when the function above is triggered. I'm using the latest

I have a set of droppable li elements that accepts a draggable icon. The list of items is in a scrollable div element. I put together a simple example here: http://www.nerdydork.com/demos/dragscroll/ I'm wondering if there is a way to autoscroll the list of elements when you are dragging the draggable element. For example, let's say you are somewhere in the middle, like http://www.nerdydork.com/demos/dragscroll/#j . As you approach the top of the div, it will start scrolling up, as you approach the bottom of the div it will start scrolling down. Anyone know how to accomplish this with jQuery?

I want the draggable to be reverted to its original position if the ajax call on drop returns a failure. Here is the code what I am imagining it to be.. It is OK if the draggable rests in the droppable while the ajax call is in process... <script type="text/javascript"> jQuery(document).ready($){ $("#dragMe").draggable(); $("#dropHere").droppable({ drop: function(){ // make ajax call here. check if it returns success. // make draggable to return to its old position on failure. } }); } </script> <div id="dragMe">DragMe</div> <div id="dropHere">DropHere</div> Thanks for your replay @Fran Verona.