Where to start with drag and drop to change order of items

Report · Sep 27, 2011

I have this CMS, different categories. Each category contains several images. People click on the category they want to change and then see all the images. I need to make there a drag and drop system so clients can change order in which items are showed on their website. The order is written to the database.

People say to me, hell you should use AJAX. There are many AJAX versions and exemples and I don't know where to start. I googled on drag drop coldfusion but the more I read the more confused I get. I am no good at javascript and I am sort of panicking. I know though I should find a way to get comfortable with it.

Can you please point me in the right direction, where to start, what method to chose?

Thanks in advance for any help.

Report · Sep 27, 2011

Drag & drop is a client-side technology, so ColdFusion is of no use whatsoever. This leaves you with the following options:

Javascript.

That's it. You'll need a CF webservice of some description if, as you say, you want to save settings to a database but one step at a time eh? To be honest, that's a major undertaking if you don't know what to do. Hell, I've been doing this for years, and I reckon I'd seriously struggle writing something like that.

Now servers are quicker and so are internet connections, I'd suggest just having up/down hyperlinks under each image, which then refresh the page, call to the database to move that image's priority up or down, then re-display the page. As long as the image titles don't change the browser will keep them cached anyway so the page won't take long to load at all.

Not perfect I know, but a thousand times easier than what you'd be trying to implement with JS.

Report · Sep 27, 2011

Hi Owain,

This is exactly how it works now, image, description, arrow left, arrow right and it works. But my client wants more:-) As a compromise the new order doesn't need to be written to db after each move. We can let people move around with images and then let them click submit button to save new order when they are finished.

Report · Sep 27, 2011

Just use jquery sortable or something similar to allow someone to sort a

list of items. When you then save (or on every drop) you can then send the

updated new list of ID numbers to your CF page.

http://www.simonbattersby.com/blog/drag-and-drop-with-jquery-ui/

There are a few examples with PHP out there, which should get you the right

idea.

Report · Sep 27, 2011

But my client wants more:-)

And let me guess, they don't have any extra money but are willing to be really grateful and maybe buy you lunch?

There have been several drag & drop libraries over the years, but now it's being put natively into the HTML5 specification, which will make it massively simpler. I believe all the major browsers are now supporting HTML5, so I'd start looking into that. Google "HTML 5 drag and drop" and it'll come up. I'm actually working through an HTML5 book now, but I'm not up to that chapter yet so my help will be limited

It is, however, all Javascript and there's no way of getting away with that. You may be able to bodge some examples, or do a quick brushup on your Javascript skills

Report · Sep 27, 2011

Hi Owain,

Luckily it is a good client and he is always willing to pay what it needs. That is why I really want to realise this. Each time he comes up with a challenge and I manage to realise it he is so happy he comes back with new projects.

I have the impression there is not 1 standard for ajax, if you are comfortable with js it probably doesn't matter but I feel a bit lost not knowing where to start. I will look up this html5 thing. Found also some sites with jquery examples.

Report · Sep 28, 2011

Drag & drop is a client-side technology, so ColdFusion is of no use whatsoever. This leaves you with the following options:
Javascript.

Agree. And if one is a web developer, one cannot fall back on "I'm no good @ Javascript", because Javascript is not a "nice to have", it's essential.

Fortunately, Bianca, it sounds like you have an understanding client, so this is the perfect situation to buy a Javascript book and start working through it, using your requirement here as an "end game".

I'd get to grips with the basics of JS (including writing it in an OO fashion), then get hold of a JQuery book & follow through all that too.

--

Adam

Report · Sep 28, 2011

Hi Adam,

It has been a long time....

I do completely agree with you, I am aware of the fact that I am just a medium programmer not knowing javascript. I think I should just start with a javascript for dummies book. I just need to find the english book, living in france that is not always easy and I hate doing these kind of things in french.

However my client needs this to be done before wednesday so for now I am just looking for the right example on internet that I can integrate. I think I found what I am looking for at http://plugins.jquery.com/project/listsort

Report · Sep 28, 2011

There are a couple IIRC, there's a "Javascript for Dummies" and a "Javascript & Ajax for Dummies" - go for the former if you're going to go for either. Ajax itself is one of the most misunderstood terms, it always relies on you having a second technology serving up the data - in your case that would be ColdFusion, which clearly a generic book would not cover. Personally as you're already a web developer, I'd skip the "For Dummies" range, you'll not learn all that much as they really do only cover the absolute basics.

I think I bought this book, which covers not only the basics but goes onto explain OO principles and extremely in-depth stuff as well for when you're ready. It'd be a far safer investment

In the meantime, jQuery is an extremely good shortcut.

Report · Sep 28, 2011

Owain North wrote:
[stuff]

Good advice.

--

Adam

Report · Sep 28, 2011

I got now what I think was the 'easiest' part. the layout I want with <li> and I can drag and drop. But now, how to retrieve the new order and write it to database. I used jquery functionality like I found at http://jqueryui.com/demos/sortable/#display-grid

Report · Sep 28, 2011

There are a number of examples of doing this if you search on jquery drag

drop save list, including in coldfusion

http://www.aliaspooryorik.com/blog/index.cfm/e/posts.details/post/sortable-list-with-jquery-and-coldfusion-23

http://www.hdeya.com/blog/2009/05/sorting-items-on-the-fly-ajax-using-jquery-ui-sortable-php-mysql/

Report · Sep 28, 2011

I learned by buying the book "Teach Yourself Javascript in 24 Hours", published by SAMS. It's a tutorial that got me started. Now when I have to do something difficult, I start with Google and almost always find a suitable code sample.