How to: Building Drag and Drop functionality with ASP.NET Ajax


AJAX has been very popular over the past few years, but I've seen it primarily used by developers to reduce page refreshes and to do background data-loading.  Both of these uses are great uses of the technology, but one of the features that I like the best is the ability to do Drag-and-Drop functions.  Users have gotten accustom to this feature since it has been available in Desktop Applications for what seems like forever, but web developers have steered away from it because of the time/complexity it takes to enable it using older technologies.

 

Well, Jeff Prosise has written a very short article on how to enable this with ASP.NET AJAX.  His a synopsis from Jeff:

For months now, I've been meaning to write a sample showing how to use PreviewDragDrop.js to implement real drag-drop, featuring custom drag sourcing and custom drop targeting. I finally got around to it, and the results are pretty cool. I learned quite a lot about DragDropManager in the process, including how to enhance it by adding support for custom drag visuals. Once you're familiar with the model (and comfortable with the concept of deriving classes and implementing interfaces in JavaScript), DragDropManager opens up a whole new world of possibilities for Web UIs.

image

Here's a link to his article: Click here

~ Robert Shelton

Technorati Tags: ,
Comments (5)

  1. Jessie says:

    How can we handle multiple target drop area?

    Here is the code to create a drag area. A value "red" or "yellow" can be passed to the object.

    var source1 = new Custom.UI.ColorDragSourceBehavior

                      ($get(‘RedDragSource’), ‘red’);

    var source1 = new Custom.UI.ColorDragSourceBehavior

                      ($get(‘RedDragSource’), ‘yellow’);

    Here is the code to create a drop area. If I have 2 drop areas, how can I distingurish them?

    var target = new Custom.UI.ColorDropTargetBehavior

                      ($get(‘DropTarget’));

    Thanks.

  2. sagar says:

    first thank you ,

    i want to drag and drop my dropdown list with the use of ajax ….

    so can you give me some ideas for that ……

  3. Harry says:

    Change The Layout of web page Directly by Mouse  Using Ajax And Managed By Administrator

  4. Gayatri says:

    Please i need the code the treeview which will play the dragging and droping the elements of the treeview which placed on the left pane of the web page http://219.91.199.132/watchknow/default.aspx or sample example http://www.watchknow.org

Skip to main content