Archive | February 2010

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>