Page 1 of 1

Need To Implement Drag & Drop Layout Editor

Posted: Mon Nov 24, 2008 3:59 pm
by volomike
Using jQuery, I need to implement a drag and drop layout editor for a page. So, imagine an index-card sized representation of a resume (called a CV in Europe), but tipped on its side, and you drag and drop elements on it but they snap to order in a list. When you click Done, jQuery detects the new order and stores it in a hidden field. I then post the form back to the server and refresh the resume again.

Any ideas are welcome.

Re: Need To Implement Drag & Drop Layout Editor

Posted: Mon Nov 24, 2008 4:18 pm
by John Cartwright
What have you done so far?

As far as implementing the movable elements, your on the right track with jquery :) Take a look at http://ui.jquery.com/repository/real-world/layout/ for an implementation.

Basically, if you want the layout positions remembered you'll simply need a callback for when an element is moved it sends an ajax request to updates it's position in the database. This is highly dependent on your implementation, so I can't offer up much advise without any more info.

Re: Need To Implement Drag & Drop Layout Editor

Posted: Tue Nov 25, 2008 2:24 pm
by volomike
I managed it. I didn't realize how easy jQuery would make it!!! It was exciting when I saw the result. I thought I would have to do a bunch of work myself.

All I did was make a UL with some LI's inside, make the ones I want movable have a class of "movable" on them, and then do something like this:

Code: Select all

// of course, I used #myUL instead of UL, but you get the idea
$('UL').sortable({
  revert: true,
  scroll: true,
  opacity: 0.7,
  axis: 'y',
  cursor: 'move',
  items: '.movable'
});
 
And now the list is sortable and only the items I want to permit to move are movable.