Need a hint on managing images via CMS backend
I'm developing a simple CMS and working on a backend now. I want each, lets say, article to have a slideshow editable through a backend site. I created a list of images loaded using PHP from a MySQL database - they are <img> objects in a single <div>. To each <img> belongs a small <div> containing 3 <a> objects formated as buttons: move up, move down, delete (the order of images does matter). This is how it looks like:
I thought it would be fun to be able to move the images up and down and delete them interactively, without having to reload the page each time, and afterwards click a submit buttom to apply the changes in the database. The problem is I'm not sure how to code it.
<img src="pic.jpg" id="o1" alt="" style="display: block">
<div class="photoMenu" id="pm1" style="display: block">
I thought of two solutions. One would be: each time user clicks up or down, the image swaps it's "src" and "id" with the upper or lower neighbour. That would work fine if it weren't for the delete option. With an id missing, swapping fails.
The other solution I though of was an array containing filenames ("src's") and a funtion that renders them. This is however difficult without using OOP.
Are there somewhere any snippets doing what I want to do? Or maybe there is another solution, not necessarily using JS? Help of any kind will by very appreciated.