Drag Drop using javascript

Note : There are two files attached with this – You can Download them from Yahoo.

 

Introduction

 

I have been working on a requirement to implement drag-drop functionality in a web application using JavaScript. Though there are many JavaScript libraries like scriptaculous which support many flavors of drag-drop, it’s always fun to write your own which does things the way you want.

Here I am attaching the JavaScript file, DragDropJScript.js, which implements the drag-drop along with a sample application.

 

How to make it work

 

1) Link the DragDropJScript.js file with your aspx page.

 

<script type="text/javascript" src="DragDropJScript.js"></script>

 

2) Create two DIV elements on your page; one will act as the source of draggable items and the other as the drop-target. Add arbitrary items to the drag source DIV.

 

<div id="DragContainer" .. and <div id="DropContainer">

 

3) Call the JavaScript function CreateContainers(). Pass the Ids of both the DIVs to it. This will mark the containers as drag-source and drag-container. You can call CreateContainers on any suitable client-side event like window.onload.

 

window.onload = function(){

CreateContainers("DragContainer", "DropContainer"); ...

}

 

4) Implement the OnItemDrop() method. This method is called by the code in DragDropJScript file when a valid item is dragged from the drag-source container and dropped in the drop-target container. Use this method to do your own processing such as doing an asynchronous callback to the server.

 

function OnItemDrop(approved, item, dropTarget){ ...

 

5) The asynchronous callback can be implemented by using ICallBackEventHandler as I have done in the sample. Please refer to MSDN documentation for more on ICallBackEventHandler.

 

6) Process the results of the callback and take appropriate action on the page. In the sample, this is done through ShowModifiedCart function.

 

Known Issues

 

1) The drag effect may not be displayed properly in case of Mozilla firefox browser.

2) It currently supports only one pair of container on one page.

 

Important: You can use the DragDropJScript.js file in your code. But in case you make any modifications to it please post the modified file on the forum.

 

Let know if you need any clarifications of have any suggestions.

 

 

Thanks & Regards,

Arun Manglick

SMTS || Microsoft Technology Practice || Bridgestone - Tyre Link || Persistent Systems || 3023-6258

 

DISCLAIMER ========== This e-mail may contain privileged and confidential information which is the property of Persistent Systems Pvt. Ltd. It is intended only for the use of the individual or entity to which it is addressed. If you are not the intended recipient, you are not authorized to read, retain, copy, print, distribute or use this message. If you have received this communication in error, please notify the sender and delete all copies of this message. Persistent Systems Pvt. Ltd. does not accept any liability for virus infected mails.