Tips : Drag/Drop Portal Interface With Scriptaculous And Drupal

Ever wondered how to create an interface like Google Personalized Home? In the first section of this article I'll demonstrate how to create a drag/drop portal in a few lines of JavaScript code, using the excellent Prototype and Scriptaculous JavaScript libraries. In the second section, I'll explain how to integrate this code into Drupal as a server backend for storing user settings. You may check the frontend here (tested with Firefox 1.5, IE6, and Opera 8.5), and download a reusable JavaScript Portal class and Drupal module for the backend at the bottom of this post.

Portal Frontend

Let's start with the XHTML structure of our portal, the portal will provide three columns for users to arrange their portlets, a list of available portlets to choose from, and the actual portlets. Each column has .portal-column as its class, and each portlet's class is .block (I'll refer to portlets as blocks from now on). The block list is going to be a special portal column identified by #portal-column-block-list as an id.

 

<div id="portal">
  <div class="portal-column" id="portal-column-0">
    <h2>Column 0</h2>
  </div>
  <div class="portal-column" id="portal-column-1">
    <h2>Column 1</h2>
  </div>
  <div class="portal-column" id="portal-column-2">
    <h2>Column 2</h2>
  </div>
 
  <div class="portal-column" id="portal-column-block-list" style="display: none;">
    <h2 class="block-list-handle">Block List</h2>
    <!-- Blocks go here -->
  </div>
</div>

The block list is not displayed until the user clicks on "Add content". Now let's take a look at each block's structure:

<div class="block">
  <h3 class="handle">
    <a class="block-toggle"><span>toggle</span></a>
    
  </h3>
  <div class="content">
      </div>
</div>

Toggle is a link to hide and show block's content.

[Read more..]

Courtesy : Aymanh.com