Sorting links with jQuery

I finished the JS Live course and have spent the last couple days discovering different jQuery libraries. A lot of limitations I had are suddenly feeling like they have potential solutions, but I feel I am running the risk of diving into the deep end with only a beginner’s swimming ability.

In my perfect world, here is what I would like to do:

  • have a series of simple text links (see below) whose order can be modified without the need to manually code the HTML source.
  • use jQuery feature like jQueryUI (Sortable) to allow for quick and easy modification of said order
  • have the ability to save the changes

Ideally, this page would be for clients whose sites have a basic image gallery. They would be able to access this “link order configuration page” via a server-side scripted login page only they can access.

I kind of liked NextGen’s gallery for WordPress, but even if I was utilizing a WP theme at the moment I require something a bit simpler.

I just want to be able to allow the client to reorder the HTML links with an easy JS interface that can save changes to the actual HTML without the need to use a WYSIWYG editor and force the client to hand code the links themselves.

So, am I trying to run before learning to walk or is this potentially doable? :blush:

Here’s the basic HTML structure:

<!DOCTYPE...
.
.
<body>

<div id="links>
   <a href="images/pic1.jpg" title="Picture 1">Picture 1</a>
   <a href="images/pic2.jpg" title="Picture 2">Picture 2</a>
   <a href="images/pic3.jpg" title="Picture 3">Picture 3</a>
   <a href="images/pic4.jpg" title="Picture 4">Picture 4</a>
</div>

</body>
</html>

Totally doable, if you’re generating the list of links from a CMS / database type app, then you could add a sort order field.
You can then use jQuery draggable/droppable with sortable to build a nice rich interface that allows clients to drag items around the list. Then you figure out the sort order and save them.

Let us know how you go :slight_smile:

Thanks for the info, John :smiley:

That’s the only part I do not yet know how to do. I can generate links from, for example, a certain sub directory via PHP, and I understand enough to easily set up the specific event listeners to hook up to the jQuery UI library.

My limited knowledge so far tells me the DOM modifications made by JS are not visible in terms of viewing the HTML source code. A quick search of “save DOM changes to HTML” led me here, but I am not certain this is the correct way to go about this.

Back to :google: I go…

Instead of messing around I just used its serialize method and plugged changes into an MySQL table.

A few more steps perhaps, but gets the job done :smiley: