• North American Sales: 1-800-231-8588
  • Global Contacts
  • My Account
Infragistics Infragistics
Menu
  • North American Sales: 1-800-321-8588
  • My Account
    • Sign In/Register
  • Design & DevelopmentDesign & Develop
    • Best Value
      Infragistics Ultimate The complete toolkit for building high performing web, mobile and desktop apps.
      Indigo.Design Use a unified platform for visual design, UX prototyping, code generation and application development.
    • Web
      Ignite UI for Angular Ignite UI for JavaScript Ignite UI for React Ultimate UI for ASP.NET Indigo.Design
    • Desktop
      Ultimate UI for Windows Forms Ultimate UI for WPF
      Prototyping
      Indigo.Design
    • Mobile
      Ultimate UI for Xamarin Ultimate UI for iOS Ultimate UI for Android
    • Automated Testing Tools
      Test Automation for Micro Focus UFT: Windows Forms Test Automation for Micro Focus UFT: WPF Test Automation for IBM RFT: Windows Forms
  • UX
    • Indigo.Design Desktop Collaborative prototyping and remote usability testing for UX & usability professionals
    • Indigo.Design A Unified Platform for Visual Design, UX Prototyping, Code Generation, and App Development
  • Business Intelligence
    • Reveal Embedded Accelerate your time to market with powerful, beautiful dashboards into your apps
    • Reveal App Empower everyone in your organization to use data to make smarter business decisions
  • Team Productivity
  • Learn & Support Support
    • Help & Support Documents
    • Blogs
    • Forums
    • Product Ideas
    • Reference Applications
    • Customer Stories
    • Webinars
    • eBook & Whitepapers
    • Events
  • Free Trials
  • Pricing
    • Product Pricing / Buy Online
    • Renew Existing License
    • Contact Us
ASP.NET
  • Product Platforms
  • More
ASP.NET
ASP.NET Introduction to the Infragistics Web Drag and Drop Framework
  • Blog
  • Files
  • Wiki
  • Mentions
  • Tags
  • More
  • Cancel
  • New
ASP.NET requires membership for participation - click to join
  • ASP.NET
  • Accessing Extra Data in Data Bound Controls
  • ASP.NET Performance - A Place To Start
  • +Building an Ajax Master/Detail Page with the WebDataGrid
  • Building WebParts with NetAdvantage ASP.NET Controls
  • Data Binding the WebDataGrid to Common Data Sources
  • Getting Started with NetAdvantage ASP.NET
  • HTML5 Mode and Other Goodness in the WebRating Control
  • Implementing WebDataGrid Client Side Search
  • Introduction to the Infragistics Web Drag and Drop Framework
  • Learn to Build a WebDataGrid Custom Pager
  • Understanding Script Combining
  • Using ADO.NET to Perform CRUD Operations with the WebDataGrid
  • WebDataGrid 101: Fill the Grid with Data and Change the Look and Feel
  • +WebDataGrid : Import data from Excel & Export to Excel, PDF or XPS
  • WebDataGrid Client-Side CRUD
  • WebDataGrid DataViewState vs ViewState
  • WebDataGrid Validation

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).

  • 2009.1
  • ASP.NET
  • WebDragDrop
  • Share
  • History
  • More
  • Cancel
Related
Recommended