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.
Need To Implement Drag & Drop Layout Editor
Moderator: General Moderators
- John Cartwright
- Site Admin
- Posts: 11470
- Joined: Tue Dec 23, 2003 2:10 am
- Location: Toronto
- Contact:
Re: Need To Implement Drag & Drop Layout Editor
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.
As far as implementing the movable elements, your on the right track with jquery
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.
- volomike
- Forum Regular
- Posts: 633
- Joined: Wed Jan 16, 2008 9:04 am
- Location: Myrtle Beach, South Carolina, USA
Re: Need To Implement Drag & Drop Layout Editor
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:
And now the list is sortable and only the items I want to permit to move are movable.
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'
});