Introduction to the Infragistics Web Drag and Drop Framework

The Infragistics Drag and Drop framework features a rich API for creating interactive web pages. The following article demonstrates how to designate drag-able elements on the page and to define drop targets. Also you will learn how to manipulate the DOM to keep the UI synchronized with the user interaction.

The page you build allows you to drag images from one area of the screen to a target area.

image

Note: The screen capture did not render the cursor to this image. Normally you would see a cross-hair cursor hovering above the semi-transparent image to indicate dragging.

Markup

To begin, create a new ASPX page and add a ScriptManager inside the FORM element. Inside the ScriptManager enter the following references:

 

<asp:ScriptManager runat="server" ID="sm">
    <Scripts>
        <asp:ScriptReference Assembly="Infragistics2.Web.v9.1, Version=9.1.20091.1005, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" Name="Infragistics.Web.UI.SharedScripts.igDragDrop.js" />
        <asp:ScriptReference Assembly="Infragistics2.Web.v9.1, Version=9.1.20091.1005, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" Name="Infragistics.Web.UI.Scripts.5_igObjects.js" />
    </Scripts>
</asp:ScriptManager>

 

In this demo, the ScriptManager brings in two script references. The first script is responsible for making the Drag and Drop framework available to the client while the second script holds utilities and support cl***to the framework.

Next, enter the HTML required to display the images. The markup is comprised of two main parts: an items container and a drop target. Enter the following code just after the ScriptManager closing tag: (Note: You will have to change the IMG markup to match image paths in your application)

<div id="items">
    <div id="item1" class="item moveable"><img src="<%= ResolveUrl("~") %>images/zj1.jpg" alt="Zachary at the Drums" /></div>
    <div id="item2" class="item moveable"><img src="<%= ResolveUrl("~") %>images/zj2.jpg" alt="Zachary at the Drums" /></div>
    <div id="item3" class="item moveable"><img src="<%= ResolveUrl("~") %>images/ty1.jpg" alt="Tyler at the Drums" /></div>
    <div id="item4" class="item moveable"><img src="<%= ResolveUrl("~") %>images/ty2.jpg" alt="Tyler at the Drums" /></div> </div> <div id="destination"></div>

The items DIV acts as a container for each of the images. Every image is wrapped with a DIV with the appropriate ID and class definitions applied. Later in the article you will define the CSS cl*** but for now know that the item class will allow the DIVs to display together on the same line and the moveable class will turn the cursor to a crosshair.

The destination div is a placeholder for the items once they are dropped on the page. This element is manipulated programmatically to add the dropped elements to it’s DOM tree.

Script

Now that you have the basis the page you may begin adding interactivity to the page. Create a script block directly after the closing div tag from the above code and enter the script below. You are required to place this script below the ScriptManager as the script references must be available to the browser before this code can execute.

Sys.Application.add_load(app_loaded);

function app_loaded()
{
    var dd = new $IG.DragDropBehavior();
    var items = $get("items");

    for (var i = 0; i < items.childNodes.length; i++)
    {
        if (items.childNodes[i].getAttribute)
        {
            dd.addSourceElement(items.childNodes[i]);
        }
    }

    dd.addTargetElement($get("destination"), true);
    dd.get_events().addDropHandler(drop);
}

The first step is to register a function named app_loaded to run when the application starts via the ASP.NET AJAX add_load function.

The app_loaded function begins by creating a new instance of the Infragistics Drag and Drop Behavior class. This class is a central manager for all the drag and drop actions. Next a reference to the items container is created so you can loop through the child elements to add the dragging behavior. You must check to ensure the getAttribute method exists before proceeding to pass it to the addSourceElement method of the behavior object. This practice is an easy way to ensure you don’t attempt to attach the behavior to an element that will later fail.

Line 16 registers the destination container as an eligible drop target element. The last argument (in this case true) determines whether or no the child elements of the one being passed in are marked as drop targets as well.

Finally line 17 uses the get_events method to add a function that is called once the element is dropped on the page. In this case a new function named drop is assigned to the drop hander, which is defined below.

As soon as the element is dropped into a target the registered function will run. Enter the following script directly after the closing bracket from the function above.

 

function drop(sender, eventArgs) {
    var source = eventArgs.get_manager().get_source().element;
    $get("items").removeChild($get(source.id));

    var div = document.createElement("div");
    div.innerHTML = source.innerHTML;
    div.setAttribute("id", source.attributes["id"].value);
    div.setAttribute("class", "item");
    div.setAttribute("className", "item");

    var dd = new $IG.DragDropBehavior();
    dd.removeSource(div);

    $get("destination").appendChild(div);
}

This function has the signature of sender and eventArgs. The sender argument is a reference to the items being dropped. You will use this variable to access the source’s attributes. The eventArgs argument will provide context to the drop action being handled.

First, a reference to the source item being dropped is created. Then the source variable is used to remove the DIV from the items container.

Before you can add the item to the DOM tree of the destination, you must first programmatically create a new element. Once you have the new element you can set the innerHTML property equal to the source’s innerHTML and then both elements will have the same markup inside the element. Next you will build up the attributes of the new DIV one by one to make them match what is found on the original DIV.

Readers with a watchful eye may wonder why this function does not just use the outerHTML property to create equal markup instead of the manual approach in lines 8 – 10. Unfortunately all browsers do not recognize the outerHTML property, so you may not use it reliably. Therefore each attribute is added back to the DIV to build up the element will the necessary parts.

Another quirk of the code in this listing is found in lines 9 and 10. When setting the class attribute of an element created programmatically, not all browsers agree on how the formatting is done. Therefore you must add the class using the key of “className” for Internet Explorer and “class” for all other browsers.

Next the element being dropped is un-registered as being able to drag on the page and finally the element is added to the destination DIV’s DOM tree.

Conclusion

In this article you have learned:

  • Setup the Infragistics Drag and Drop framework on your page
  • Register items as drag-able
  • Define drop targets on the page
  • Keep the UI in sync with changes in the DOM
  • Work out browser conflicts

To watch a video the page create in this article, please check out: Introduction to the Drag and Drop Framework (video).

Related
Recommended