Drag, drop, sort with scriptaculous and PHP 5

It never has been easier to sort elements or objects on a web page. Use the drag and drop capacities of scriptaculous plus Ajax plus PHP 5 plus MySQL. Onload the create function from scriptaculous is requested. It defines a sortable list and a drop zone. "Sortable.create" transforms an unordered list into a sortable list with draggable items. The event onmouseup takes care for the AJAX part. A XMLHttpRequest is invoked that loops through all li elements to capture the new order of the draggable elements and store it in an array (see screenshots below). This is where a PHP class is taking over. It updates the sorting fields in the database table and returns the new order. This script can look after any elements or objects (navigation and so forth), you just have to adapt the return value of the corresponding function in the responsible class (see also readme). To build in this script in your web page a few lines of code will do it. Very comfortable.

The scripts snippets you see here (the complete script is downloadable) is only a small part of the complete application. That's it. The files and other stuff are all prepared for your convenience (production and compressed scripts included).
Best regards Claudio Biesele


Part of JavaScript code:

// Send request to server
function process(content,action) {
   if (xmlHttp) {
      params = "";
      content = encodeURIComponent(content);
      if (action == "updateList") {
          params = "?content=" + serialize(content) + "&action=updateList";
      }
      if (params) cache.push(params);
   try {
      if ((xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
         && cache.length>0) {
         var cacheEntry = cache.shift();
         xmlHttp.open("get", "modules/dragdrop.php" + cacheEntry, true);
         xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
         xmlHttp.onreadystatechange = handleRequestStateChange;
         xmlHttp.send(null);
      }
      else
      {
         setTimeout("process();", 1000);
      }
   }
   catch (e)
   {
      displayError(e.toString());
  }
 }
}


Part of Classes code:

// Handles the server-side data processing
public function Process($content,$action) {
   $this->content = $content;
   $this->action = $action;

   switch($this->action) {
      case 'updateList':
         $this->new_order = explode('_', $this->content);

         for ($this->i=0; $this->i < count($this->new_order); $this->i++) {
            $this->y = $this->i;
            $this->new_order[$this->i] = $this->dbdef->real_escape_string($this->new_order[$this->i]);
            if (strlen($this->y) == 1) {
               $this->y = "00".$this->i;
            }
            if (strlen($this->y) == 2) {
               $this->y = "0".$this->i;
            }
            $this->insid = $this->new_order[$this->i];
            $this->result = $this->dbdef->query("UPDATE tb_dragdropsort
                                                SET sorter = '$this->y'
                                                WHERE dragdrop_id = {$this->insid}");
         }
         $this->updatedList = $this->BuildTasksList();
         return $this->updatedList;
         break;
   }
   return null;
  }
}


dragdropsoret_1.png
1. First stage: nothing is sorted - a big mess.
dragdropsort_2.png
2. By moving around the picture parts sorting begins to make sense.
dragdropsort_3.png
3. Everything is sorted in correct order - almost perfect ....
dragdropsort_4.png
4. ... if the spaces between the picture elements are removed.
 
Download the full script at www.fastproject.ch. The downloaded script is free from Copyright restrictions. Zurich, 14th of September 2016.
Donate with PayPal:
placeholder