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.