jQuery Sortable Lists With Drag Drop Handle
jQuery is damned powerful there’s no doubt about it, but it’s a swine to get started with and the documentation was written by nerds for nerds. The shameful thing is, it doesn’t need to be so hard. I’ve recently made use of a drag / drop style list that will remember the order of the list.
If you use the standard jQuery sortable items, you’ll get the two following problems:
- You won’t be able to click on any items in the sortable list you have
- You’ll probably want an update of the order of the list after every change.
I did find a solution to the problem over at Scott Sauyet’s site, but I needed a little more… The following example will do both, it uses the handle and update options on the .sortable item. By adding these simple items you can produce a pretty advanced sortable list. You could even add AJAX into that update command and automatically update your database with the new values every time you change then removing the need to refresh, and that’s very web 2.0.
Item 1 with a link to Google- Item 2
- Item 3
- Item 4Perhaps you want to add a form in here?
Text:
And a textarea
I’ve ‘enhanced’ it ever so slightly by adding in some styles for the list items and handles. The code for this sortable drag and drop list is below:
<style>
#test-list { list-style: none; padding: 0; margin: 0 40px; }
#test-list li { margin: 0 0 10px 0; background: #eaf3fa; padding: 15px; }
#test-list .handle { float: left; margin-right: 10px; cursor: move; }
#test-log { padding: 5px; border: 1px solid #ccc; }
</style>
<script type="text/javascript" src="{ latest jquery release }"></script>
<script type="text/javascript" src="{ ui core }"></script>
<script type="text/javascript" src="{ ui sortable }"></script>
<script type="text/javascript">
// When the document is ready set up our sortable with it's inherant function(s)
$(document).ready(function() {
$("#test-list").sortable({
handle : '.handle',
update : function () {
$("input#test-log").val($('#test-list').sortable('serialize'));
}
});
});
</script>
<ul id="test-list">
<li id="listItem_1"><img src="arrows.png" class="handle" alt="move" />Item 1 with a link to <a href="http://www.google.co.uk/" rel="nofollow">Google</a></li>
<li id="listItem_2"><img src="arrow.png" class="handle" alt="move" />Item 2</li>
<li id="listItem_3"><img src="arrow.png" class="handle" alt="move" />Item 3</li>
<li id="listItem_4"><img src="arrow.png" class="handle" alt="move" />Item 4
<p>Perhaps you want to add a form in here?</p>
<p>Text:<br /><input type="text" /></p>
<p>And a textarea<br /><textarea></textarea></p>
</li>
</ul>
<label for="test-log"><strong>Resultant order of list</strong></label>
<input type="text" size="70" id="test-log" />
One important thing to remember, that might have you stumbling is that you HAVE to name the list items as such id=”item_1″ that underscore and number will define the elements in the array past out to the text box.
Experiment, enjoy.
21-09-2008
Ah! Thank you for this code. I managed to implement additional effects into this for an amazing result.
Email me if you would like the source. I’d be happy to share.
11-09-2008
@Lionel You’ll probably want to create another PHP file that will receive, handle and return your variables from the jQuery.
Add a function into the update part to do just that, and there is plenty on that in the jQuery docs. Alternatively you could just Google jQuery AJAX POST (or GET.)
03-09-2008
Hi,
Thanks for sharing
can we use persistence?
Can you point me to where I could grab myself an ajax script to insert the array in a databse?
02-09-2008
@andy sometimes you just need someone to tell the problem and the solution appears to you! Glad you sorted it, good luck with the rest of it.
02-09-2008
Stupid! My mistake! Got it now. Thanks again - this is perfect…
02-09-2008
Thanks for this - just what I have been looking for as my jQuery (and javascript generally) is still at the ‘infant’ stage!
I am hoping you may be able to advise though… I am wanting to use this for a group of small images (re-ordering icons actually) and would very much prefer to display then horizontally. Using a ‘display: inline’ works visually but then the drag and drop is inconsistent, sometimes working, sometimes not - does not always open up for the drop etc.
Do you know of a way I might achieve this?
The code is very much appreciated and thanks again.
27-08-2008
great work, thank you!
25-08-2008
ismail: you want to copy the whole chart to a new location when you drag it, or just elements in the chart? What type of chart is it?
25-08-2008
i need a drag chart with jquery but the dragged item should stay at its old place also.
19-08-2008
I’d suggest you have all your paragraphs as list items which can be re-ordered with the above code. When you click submit, the order of the paragraphs is recorded and the text restructured accordingly.
You could add new paragraphs to the list using Ajax and the jQuery Form plugin too? If I’ve misunderstood your question, just elaborate with exactly what you need to perform.
18-08-2008
Is there any way to drag a paragraph of text into a textarea (in a form)?
For example, the textarea contains Paragraph 1, 2 & 3, but you want to drop an extra paragraph between 2 & 3 (but keeping everything inside the textarea).
31-07-2008
andol - if by the draggable div you mean the handle then you could use css to move it most anywhere, you need to have something with the class name .handle to act as the dragging mechanism. If you give the list item a relative position you could then easily use an absolute one for the handle to drop it 100px to the right or something, hopefully that’s what you meant.
31-07-2008
i d like to know if this dragable div could be droped in any place on the page, and keep this positon data to database?
thanks for your share, i really like it.
30-07-2008
thank you very much
25-07-2008
thx