Drag, Drop, Sort & Delete with Script.aculo.us
I’ve been combing the web for this solution to no avail. I would have thought that I was not the only person looking for something like this.
If you are looking for a jQuery solution, look here: http://robertfrew.wordpress.com/2010/03/25/drag-drop-sort-delete-with-jquery-jqueryui/
One of my websites is a membership based website. It allows you to create photo albums. All of it has been custom created using PHP & MySQL. To manage the photos, I created an admin page that displays thumbnails of all your photos. This page allows you to sort your thumbnails by using the Script.aculo.us libraries Sortables function. To edit individual images, you double click the image and it takes you to another page which features more advanced editing options such as rotate, crop, scale, etc…. This page also was the only way you could delete the image.
I soon found out by a number of my members that if you had a lot of images that you wanted to delete, it was a long and cumbersome process having to open each image to delete it. So I figured since I was already utilizing the drag and drop functions of Script.aculo.us through the Sortables function, why not add a drag and drop delete function.
The first thing I checked was the library docs. I found that they didn’t really give insight into how the Sortables function actually used the drag and drop functions and really didn’t give any examples on how to take advantage of some of the features. So I ventured out onto the web in search of a solution. To my surprise, there weren’t any how to’s or examples anywhere. I did find a couple of forum posts where others like me were looking for a solution but there were no responses.
So, I decided to experiment myself and low and behold, I found a solution on my own. And because I utilize other persons solutions for other problems, I figured I’d give back to the community.
Here is my solution for Drag, Drop, Sort & Delete using the javascript frameworks of prototype.js and script.aculo.us. This solution assumes you already have the Sortables function in use. If not, there are many articles out there already such as Scriptaculous Lists with PHP by Greg Neustaetter.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Sorting Example</title>
<script type="text/javascript"
src="/js/prototype.js"></script>
<script type="text/javascript"
src="/js/scriptaculous.js"></script>
<script type="text/javascript">
window.onload = function() {
Sortable.create('namelist', {
tag:'li',
constraint: false,
dropOnEmpty: true,
containment: ['namelist','deleteArea'],
onUpdate: function() {
new Ajax.Request('processImage.php', {
method: 'post',
parameters: Sortable.serialize('namelist')
});
}
});
Droppables.add('deleteArea', {
containment: ['namelist','deleteArea'],
onDrop: deleteItem
});
function deleteItem(draggable,deleteArea) {
draggable.parentNode.removeChild(draggable);
deleteArea.appendChild(draggable);
params = 'imageID=' + draggable.id;
new Ajax.Request('deleteImage.php', {
method: 'post',
parameters: params
});
deleteArea.removeChild(draggable);
}
}
</script>
<style type="text/css">
li { cursor: move; }
</style>
</head>
<body>
<p>Drag and drop list items to sort them out</p>
<ul id="namelist">
<li id='i_1'>Image 1</li>
<li id='i_2'>Image 2</li>
<li id='i_3'>Image 3</li>
<li id='i_4'>Image 4</li>
</ul>
<div id="deleteArea">
Drag here to delete.
</div>
</body>
</html>
3 Responses to “Drag, Drop, Sort & Delete with Script.aculo.us”
Trackbacks / Pingbacks
- - March 25, 2010
It is certainly interesting for me to read that post. Thanks for it. I like such topics and everything connected to this matter. I would like to read a bit more soon.
Hilary Kuree
Hi,
Nice example. Just one question on this, I want to do the sorting of nested list I think it can’t be possible with above example. Can you pls tell me how it can be done with same above drag and drop feature. If you have any example then pls send it to me.
Chetan