1

I have a few problems with sortable list in sortable list. I'd like to make a page where I can sort elements in rows and in columns.

This is js code for sortable:

$("#page, .column").sortable({ 
   connectWith: ['#page', '.column'],
   items: '.a',
   dropOnEmpty: true,
   handle: '.portlet-header',
   cursor: "move",
   cursorAt: { cursor: "crosshair", top: 0, left: 0 },
   opacity: 0.2
});

I use 960 grid system and I have a specific html (see full example)

Problems:

  1. When I move elements from row to column, I can't move them back
  2. When I sort rows, I can't because when I move some row behind the row which has columns it can move out and I must put this element in some of the columns
  3. I'm not comfortable while dragging an element in the page because I can't locate position easily where I'd like to drop element if someone can solve this problem too

If someone could make this example functional, it would be great.

Thanks in advance and sorry for my English.

Ivan Ferić
  • 4,725
  • 11
  • 37
  • 47
Petar Stoiljkovic
  • 11
  • 1

1 Answers1

0

1: When you set #page{height:500px} then you can drag a column back to a row. Because #page had a height of 0, you can't drag anything in it.

2: This problem is solved as well when #page gets a height.

3: The placeholder shows you where the element will be placed when you stop dragging. It's not perfect yet though.

Esger
  • 1,310
  • 12
  • 18
  • When i put #page{height:500px} i have same problems: 1) if i don't have items after the columns element i can't move from columns to the position after column only before 2) Do you now how to improve this placeholder because for example when i am sorting element in one one three columns it is very difficult to put on the last position in column – Petar Stoiljkovic Jan 07 '13 at 20:44
  • Well, [here](http://jsfiddle.net/Esger/JcA2L/12/) your first two problems are solved. I fiddled around a bit more, added a clearfix to give #page the height of its containing elements and now if you drag your last element from your last column to the lower area of #page, it does work - sometimes. You have to drag around a bit in and out the columns. It still sucks :( I guess it's due to jquery ui sortable. – Esger Jan 07 '13 at 22:06