Need To Implement Drag & Drop Layout Editor

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Need To Implement Drag & Drop Layout Editor

Post 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.
User avatar
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

Post 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.
User avatar
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

Post 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.
Post Reply