How to create drag and drop lists using ATLAS

One of the biggest reasons why ATLAS is so great is because of the set of rich client-side controls it includes, such as draggable lists. Before ATLAS, I had to rely on libraries such as script.aculo.us and tool-man.org, both of these great libraries, but they require additional effort to integrate them into you ASP .NET web application. With ATLAS that is no longer the case.

To give you an idea of the great drag and drop capabilities built-in to ATLAS, I recommend taking a look at samples from Wilco Bauwer. The generic steps required to build your own draggable list are as follows:

Choose a HTML control that will contain your "draggable" items and add and as many "dragabble" items to it. In this example I'm using a div element with id "draggablePanel":

<div id="draggableContainer">
   <div id="draggableItem1">My draggable item 1</div>
   <div id="draggableItem2">My draggable item 2</div>
</div>

Next you need to add the dragDropList behavior to each draggable item and to the "draggable container" inside the XML script element of the page, without forgetting to add a reference to the AtlasUIDragDrop library:

<page 
xmlns:script="http://schemas.microsoft.com/xml-script/2005">
  <references>
    <add 
src="ScriptLibrary/Atlas/Debug/AtlasUIDragDrop.js" />
  </references>
  <components>
    <control id="draggableContainer">
       <behaviors>
          <dragDropList dataType="HTML" 
acceptedDataTypes="'HTML'" dragMode="Move">
             <dropCueTemplate>
               <template layoutElement="dropCueTemplate" />
             </dropCueTemplate>
          </dragDropList>
       </behaviors>
     </control>
     <control id="draggableItem1">
        <behaviors>
            <draggableListItem handle="draggableItem1" />
        </behaviors>
     </control>
     <control id="draggableItem2">
        <behaviors>
            <draggableListItem handle="draggableItem2" />
        </behaviors>
     </control>  

That's it! Can't get any easier than this, right?