I'm currently working on extending the DragDropList included in this library to allow detecting when an item is added or removed and issue a call to the server using AJAX. Thanks to the help of Garbin (http://forums.asp.net/AddPost.aspx?PostID=1176694). I was able to customize this class and I'd like to share my learning with those pursuing a similar goal.
- Because the Web.UI.DragDropList is a sealed class, I could not inherit from it, and instead of modifying the source code (AtlasUIDragDrop.js) I chose to create a custom class starting with the code from Web.UI.DragDropList and adding my changes to a class I named Web.UI.CustomDragDropList
- Next inside the getDescriptor function I added the following events:
//Step 1: Add events
- Next I added the properties (these can be added at the top level of the class, outside any function):
//Step 2: Create Events
this.added = this.createEvent();
this.removed = this.createEvent();
- Finally inside the onDragEnd function I added the removed event invocation and inside the drop function I added the added event invocation as follows:
//Step 3: Invoke remove method
//Step 4: Invoke added method
The usage of this list from the ASP page is as follows:
<customDragDropList dataType="HTML" acceptedDataTypes="'HTML'" dragMode="Move" removed="itemRemoved" added="itemAdded"> ....