User image sort

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
jamie85
Forum Newbie
Posts: 8
Joined: Thu Apr 15, 2004 11:59 am

User image sort

Post by jamie85 »

I currently have a site which displays a long row of images.

I want to be able to add and delete images.

The deletion is simply. Addition would be simply, however i want to be able to add images at a certain point, and also swap images if necessary. The images are stored in a folder, and the information for each image is stored in a MySQL table.

Whats the best way to accomplish this? Dragging the iamges around using AJAX drag and drop? Using check boxes to swap the images?

Much appreciated.


Jamie.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

What do you qualify as "the best way to accomplish this?"
jamie85
Forum Newbie
Posts: 8
Joined: Thu Apr 15, 2004 11:59 am

Post by jamie85 »

feyd wrote:What do you qualify as "the best way to accomplish this?"
The easiest way for the user to swap images.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

The most intuitive would likely be drag'n'drop. However I would like to impress upon you that Ajax should not be the sole solution for this you implement. I would suggest that you build your system to be able to work without any Javascript first and foremost before prettying it up with Ajax.
jamie85
Forum Newbie
Posts: 8
Joined: Thu Apr 15, 2004 11:59 am

Post by jamie85 »

feyd wrote:The most intuitive would likely be drag'n'drop. However I would like to impress upon you that Ajax should not be the sole solution for this you implement. I would suggest that you build your system to be able to work without any Javascript first and foremost before prettying it up with Ajax.
Indeed. I would prefer to steer clear of using javascript. But AJAX does is so lovely im quite drawn to it. I've done something similar before using check boxes. The user would check 2 boxes corresponding with the images they wish to swap, and then hit a submit button to swap them.
User avatar
bokehman
Forum Regular
Posts: 509
Joined: Wed May 11, 2005 2:33 am
Location: Alicante (Spain)

Post by bokehman »

jamie85 wrote:The user would check 2 boxes corresponding with the images they wish to swap, and then hit a submit button to swap them.
Swap them where? On the current page? On the client? On the server? Reorder the database? What?
jamie85
Forum Newbie
Posts: 8
Joined: Thu Apr 15, 2004 11:59 am

Post by jamie85 »

bokehman wrote:
jamie85 wrote:The user would check 2 boxes corresponding with the images they wish to swap, and then hit a submit button to swap them.
Swap them where? On the current page? On the client? On the server? Reorder the database? What?
Re-order the database.
Begby
Forum Regular
Posts: 575
Joined: Wed Dec 13, 2006 10:28 am

Post by Begby »

You can do this by creating a list with up/down links next to each image. Maybe use some arrows or something.

Each link would include the id of the database record and the direction to move, the logic is as follows

Up
If this has the order of '1' then don't do anything, otherwise take the record that has a value of order-1 and increment it, then decrement the order of the image you are moving.

Down
If this has the order of max(order) (i.e. its the last image) don't do anything. Otherwise increment its value and decrement the value of the record with order+1.

Record deletion
Update the database to have order=order-1 on all records where order is greater than the record you are deleting

Record insert
Set the order to max(order) + 1

After you get that working so that you can move images up and down one spot at a time, then you are ready to tackle drag and drop with ajax or moving an image more than one spot at a time.
Post Reply