AJAX Drag & Drop Challenge
Drag and drop is typically feature from windows application. With Web application the user is loosing it. Missing Drag&Drop is one of the top ranked features for better usability.
The new Web 2.0 styled applications are bringing Drag&Drop back. But it is quite complicated for developer to implement it. Drag and Drop happens on client side and must be coded by Jscript. For real web applications there must be some connection point between client and server. For instance a web service can be used to transfer users selection data back to server.
Developers need a framework for faster development. Microsoft offers ( at least) three AJAX drag&drop frameworks.
Webparts - best used for Sharepoint
DragDropManager- dropped with AJAX RTW - but still possible with microsoft.web.preview.dll
DragDropManager from Toolkit
Ajax Control Toolkit Drag & Drop
I have blogged my opinion about the toolkit some time ago. This time i worked out the possibility for Drag& Drop based on the toolkit.
The Ajax control toolkit contains several control where two have drag and drop. The reorderd list is a nice sample to show what is possible in web.
The Dragpanel is a easy to use control to drag ASP.NET panels over the website. It follows the great Ajax extender pattern. In earlier editions of toolkit there was a very useful support for profile binding to store the location in userprofile.
But the guys from .... (toolkit is hosted on codeplex and made by "community") have forgotten to implement a DropPanelExtender.
So you have to go into code and do it by yourself.
Drag& Drop Prototype
In my following sample I have several DIV's as drop destination. A asp.net Panel control is extended with a dragpanelextender.
<asp:Panel ID="Panel1" class="dragIcon" runat="server" Height="10px" Width="125px">hallo</asp:Panel><
cc1:DragPanelExtender ID="Panel1_DragPanelExtender" runat="server" DragHandleID="Panel1" Enabled="True" TargetControlID="Panel1"> </cc1:DragPanelExtender>The panel must extended by a drop event handler which must be done by Jscript. Take care that the script only can be executed when all elements from page are loaded.
$addHandler ($get(
'Panel1'), "drop", myDropFunction);The dropfunction gets as parameter a object which have several necessary information in like the source element. But you dont know where user have dropped. The problem left is that you have to iterate through all possible drop destinations and find out if the position matches. The following code is a small but ugly sample which demonstrate the idea.
The node which contains the panel will be moved in the DOM to the dropDIV. You can iterate later through the childcollection of each dropDIV and store the list of dropped items on the server.
<
script language=jscript>function
myDropFunction(a) {for
(i = 1; i < 4; i++){
var
myDIV=$get("dropDIV"+i)if
(isIn(a,topf)){
var n1=document.getElementById(a.target.id);
n1.parentNode.removeChild(n1);
myDIV.appendChild(n1);
}
}
The function isIn uses the position of cursor and size of div to compare if "drop" was in. That can have own business rules, what was in an what not ( like soccer).
In one of my next postings I will show a more sexy completed example.