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: https://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>
Advertisements

Tags: , , , , , , ,

About rob

PHP, Ajax, Javascript, Java, CSS, XHTML Programmer. Linux Administrator. Microsoft Certified Systems Engineer. Computer Guru.

3 responses to “Drag, Drop, Sort & Delete with Script.aculo.us”

  1. escort old says :

    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

  2. chetan says :

    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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: