0

So, here is my dilemma. I have 6 drag and drop items (pictured below). They work great. Except for the fact that once I drag an item to a different drop item they end up overlapped as you can see. What I'm wondering is, is there a way to insert the DIVs without causing the other items to move?

I have tried using the before() and after() functions but doing so pushes all the other elements down, which doesn't work when you have multiple drag items dropped. So what I'm hoping to do is simply move the item down to the next available spot without causing the other elements to shift.

Any ideas? enter image description here

UPDATED - Basically what I'm trying to do is combine jQuerys sortable with draggable. Not sure that that helps any but that's essentially what I'm trying to do because I want the drag items to react like the sort items do in their rearranging.

user1470118
  • 412
  • 2
  • 9
  • 24
  • You should checkout [jQuery UI Sortable](http://jqueryui.com/sortable/). It does pretty much exactly what you are trying to do. – Richard Dalton Jan 28 '13 at 15:05
  • Sortable isn't the functionality that I want. I still want to be able to drag and drop the items. I still need to be able to snap the drag items to the drop items. – user1470118 Jan 28 '13 at 15:10

1 Answers1

0

I'm not sure I completely understand what you want to do here exactly (what do you mean by "without causing the other items to move"?), but if I understand the idea correctly (that the user is meant to order the yellow boxes correctly into steps 1-6 with exactly one item in each step), you should probably be using jQuery UI's sortable widget rather than draggable. That would automatically take care of keeping the items neatly lined up in a simple list without overlapping, and you could get which step is which simply from the order of the list submitted through the form.

antialiasis
  • 831
  • 1
  • 8
  • 19
  • I still want the drag & drop functionality though. The item still needs to snap. – user1470118 Jan 28 '13 at 15:11
  • It does snap if you use sortable - not to the step 1, etc. labels, but to an appropriate position in a straight list. Simply making the step labels a separate, non-sortable list that you align with the sortable list with CSS would look equivalent, as far as I can tell, and because the elements you're dropping on are just "Step 1" and so on, they don't give you any more information than a simple ordering, making them superfluous except for presentational purposes. But again, I don't know precisely what your requirements are. – antialiasis Jan 28 '13 at 15:22
  • My requirements are pretty simple. The user should be able to drag the items and have them snap to the drop areas (Step 1-6). The remaining drag items should resort based on the available positions. I created this drag&drop functionality in Flash, but I'm working on converting everything over to HTML5. – user1470118 Jan 28 '13 at 15:40