Drag and Drop with Drop Zone markers

Using drag and drop functionality(for Sorting) in Prototype/Scriptaculous is rather simple. But in order have the drag and drop functionality with drop zone marker we need to use the patched Prototype/Scriptaculous JS libraries.

The code is simple and goes like this:-

Step 1:-

We need to have a conatiner div that holds the draggable child elements.

<div id=”containerdiv”>

        <div id=”childdiv_1″>

                 ..Your Content….

       </div>

       <div id=”childdiv_2″>

                  ..Your Content….

       </div>

</div>

Step 2:-

<script type=”text/javascript”>

Sortable.create(‘containerdiv’,{tag:’div’,overlap:’vertical’,scroll:window,

                                 onUpdate:updateFunction,onChange:changeFunction});

</script>

The Sortable.Create function creates a drag and drop  sortables. We need to specify the id of the parent div(here containerdiv ).The tag attribute specifies the type of child element (here we use div). The onUpdate function is called when the sort order changes and the dragging ends(i.e after we drag and drops). There is also a onChange function which is triggered when the sort order changes while dragging. The attribute scroll:window (this is important)is for enabling the scroll bar for the browser while we drag in a large page. We can use the updateFunction that is triggered while the onUpdate event to get  the current sorted list of the child elements and can use it for updating the order in the database.

var orderedarray =  Sortable.serialize(‘containerdiv’,{name:’orderlist’});

By this we get the order of the child elements after each drag and drop. See more on Sortable.serialize.

The value of orderedarray will be similar like this  orderlist[]=1&orderlist[]=3&orderlist[]=4&orderlist[]=2

Strip off the orderlist[] value from the array elements by the following method:-

var neworderarray = orderedarray.match(/\d+/g);

Now the value of neworderarray will be 1,3,4,2. This order means that div with id childdiv_1 is at the first position,div with id childdiv_3 is at the second position and so on. Use this to update the order in the DB.

Now regarding the drop zone marker we need to include the patched JS libraries in our page. Also we need include the style for drop zone marker in our page. See below:-

.emptyPlaceMarker

{

z-index: 999;

border-right: #9D9D9D thin dashed;

border-top: #9D9D9D thin dashed;

border-left: #9D9D9D thin dashed;

border-bottom: #9D9D9D thin dashed;

background-color: Transparent;

border-width:2px;

}

.emptyPlaceMarker
{
z-index: 999;
border-right: #9D9D9D thin dashed;
border-top: #9D9D9D thin dashed;
border-left: #9D9D9D thin dashed;
border-bottom: #9D9D9D thin dashed;
background-color: Transparent;
border-width:2px;
}

Thanks Tankut Koray for the amazing drop zone marker and Prototype/Scriptaculous JS patches. You can get the patched Prototype/Scriptaculous JS libraries  and how to use it from here.

Click here to see an example.


Advertisements

2 Comments (+add yours?)

  1. Asish vu
    Sep 11, 2009 @ 10:22:30

    This article was quite helpful and it worked fine..

    Reply

  2. reobrehefefly
    Dec 11, 2009 @ 23:14:13

    I’m frequently looking for brandnew posts in the WWW about this issue. Thx!

    Reply

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: