I've got it working guys. We can close this one.

Hey Guys,

     I'm farther along.  I can drag and drop images from my listview onto my target area.  I have it working so that they disappear from the listview when dropped, to show that the user can't have multiple copies of the same image in the list.

I am also able to drag from the drop target to another div that I am using as a trash collection spot.  when I do, the image disappears from the list in the drop target which is fine, but then the javascript blows up in the remove handler.

I'm using a variation on the shopping cart demo on the Infragistics page that demonstrates the drag and drop framework.

My source code for my ascx file where the listview is looks like this:

<

table id="ImageViewer1" style="width:100%;

">

<tr

>

<td style="background-color:#E1E1E1;border:2px solid #525051;padding:2px;

">

<asp:ListView ID="lvImages" runat

="server">

<LayoutTemplate

>

<asp:DataPager ID="dpImages" runat="server" PagedControlID="lvImages" PageSize="4"></asp:DataPager

>

<div id="itemPlaceHolder" runat="server"

/>

</LayoutTemplate

>

<ItemTemplate

>

<div style="border:2px outset;margin:10px;padding:2px;text-align:center;float:left;width:200px;

">

<img src='<%# Eval("ThumbnailUrl") %>' downloadUrl='<%# Eval("Url") %>' style="height:150px;width:150px;margin:2px;" imageId='<%# Eval("asset_id") %>' id='<%# Eval("asset_id") %>' /><br

/>

<span><%# Eval("Name") %></span><br

/>

<span>Source: <%# Eval("Source") %></span

>

</div>

</ItemTemplate

>

</asp:ListView><br

/>

<div id="trashCollection" style="width:100px; height:100px; border-style:dotted;right:-60px; border-color:Black" runat="server"></div

>

</td

>

<td style="text-align:center;width:250px;

">

<div style="background-color:palegreen;border:2px inset;overflow:scroll;padding:2px;height:600px;text-align:center;width:250px;" id="dropTarget" runat

="server">

</div><br

/>

<asp:Button ID="btnSave" runat="server" Text="Save selected images"

onclick="btnSave_Click" /><br

/>

<a href="CurrentImages.aspx" target="_blank">View existing images</a

>

</td

>

</tr

>

<tr>

>

<td

>

</td

>

</tr

>

</

table>

The listview is databound to a table with the images data.  The javascript looks like this:

function 

InitViewer(viewerId)

{

var manager = null;

viewer = $get(viewerId);

var dropTarget = $get(viewerId + "_dropTarget");

var ddb = new

$IG.DragDropBehavior();

var list = viewer.getElementsByTagName("IMG");

var panel = $get(viewerId + "_dropTarget");

for (var  i = 0; i < list.length; i++)

{

true);

}

var dropHandler = function(sender, e) {

manager = e.get_manager();

var  source = e.get_manager().get_source().element;

var imageList = $get(viewerId + "_imageList");

if (imageList.value != null  && imageList.value.length > 0)

imageList.value +=

";";

imageList.value += source.getAttribute(

"imageId");

panel.appendChild(source);

var removeBehavior = null;

var  ddb = removeBehavior;

if (!ddb)

{

new  $IG.DragDropBehavior();

ddb.addTargetElement($get(viewerId +

"_trashCollection"), true);

ddb.addDragChannels([

"trash"]);

ddb.addDropChannels([

"trash"]);

ddb.get_events().addDropHandler(removeHandler);

}

ddb.addSourceElement(source);

}

"_dropTarget"));

ddb.get_events().addDropHandler(dropHandler);

var removeHandler = function (source, evntArgs)

{

var panel = $get(viewerId + "_dropTarget");

var  eleID = evntArgs.get_manager().get_source().element.id;

panel.removeChild( document.getElementById(eleID) );

}

}

viewerId = the name of the table in the source code for the ascx file ("ImageViewr1").

When I drag and drop from my target area to the trash collection area, it appears to go Ok.  The image disappears from my list in the target area, then it breaks on this line:

var  eleID = evntArgs.get_manager().get_source().element.id;

The error reads: Microsoft JScript runtime error: 'get_manager().get_source().element' is null or not an object.

Any ideas what's wrong?

Thanks again.