Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
130
Drag and drop with one source and multiple targets
posted

This documents how I was able to get one source/multiple targets to work. It includes some false steps on my part (things I wasn't able to get to work), as well as what finally worked, plus some additional comments.

Requirements

This page is for a query builder for custom reports. The user sees a list of columns they can select, and we wanted them to be able to drag columns they wanted to see in the report into another list, as well as drag columns to construct filters. A sample (simplified) query might be "show me sales district, salesperson name, client name, and sales amount for the month of December." The Columns in Report list would contain SalesDistrict, PersonName, ClientName, and TotalAmount. The filters would ultimately look like WHERE SaleDate >= December 1, 2009 and SaleDate <= December 31, 2009.

What Didn't Work

Channels: I tried separate channels with the same source going against different targets. Only the first channel registered was honored. The cursor indicating a target only displayed for the first channel; the cursor over the target of the second channel indicated it was not a drop target.

Multiple behaviors: Again, the same source with different targets for each behavior. Like the channels, only the first behavior registered is honored. Unlike channels, however, the cursor over the target of the second channel indicated that it was a drop target, although lifting the mouse over that target triggered the move/drag end javascript for the first behavior.

What Did Work

1. One behavior with multiple targets (four targets in my case). Just keep adding target elements (e.g., _ddbMove.addTargetElement($get("txtWhere2"), true);).
2. In the drag start handler, I grabbed the element being dragged and put it into a hidden field ($get("<%= selectedColumn.ClientID %>").value = listItem.innerHTML;).
3. In the drag move handler, I grabbed the X/Y coordinates of the mouse and put them in hidden fields (var dragX = evntArgs.get_x(); $get("<%= targetX.ClientID %>").value = dragX;).
4. In the drag end handler, I did a postback (__doPostBack("columnDrag", ""); -- this goes against a LinkButton with the ID="columnDrag").
5. In the code behind, based on the X/Y values, I put the dragged element into the appropriate page control.

Notes

1. There may be a way of doing all this on the client, but to get the Columns in Report list to work I have to post back anyway (and I can afford to do so with this application).
2. This page, although it is dynamic (the user can select from multiple tables/views, and the list updates appropriately), all the page elements are static (the lists are inside panels with scrollbars), so using the X/Y values works for me (and elemAtPoint did not work for me).

hth,
Charles