Implemented drag and drop from one list to another but not showing value

[jwilliamson]

Hello,

I followed Selwyn's video on how to drag and drop items from one list to anothe rbut when I drop the item it just leaves a single space in the destination list if I pull it inbetween existing items or if I pull it in after an every item there is a blank select option on which I can click. In fire bug the select option contains:

&nbsp

Here is my code:

dragDrop = {
	DOCS: {
		active: false,
		data: {},
		index: -1
	},
	REQDOCS: {
		active: false,
		data: {},
		index: -1
	}
}

// get pointers to each list control
var lObj1 = {dialog.object}.getControl('DOCS');
var lObj2 = {dialog.object}.getControl('REQDOCS');

//set the amount of time to wait before you can start moving items

$e.abstractEvents.downHold.duration = 300; //default is 600ms

//setup events for dragging from DOCS -> list2
// the down hold event to start a drag
		$e.add(lObj1.contId,'abstractdownhold',function(e){
			// get list control 1
			var lObj = {dialog.object}.getControl('DOCS');
			
			var indx = lObj.indexFromPoint(e.abstractData.x,e.abstractData.y);
			//alert(indx);
			if(indx > -1){
			var ele = $('dragDropEle');
			//alert(ele.innerHTML);
			
			var data = lObj.getData(indx);
			
			ele.innerHTML = $(lObj.contId+'.'+indx).innerHTML;
			
			ele.style.top = (e.abstractData.y + 10) + 'px';
			ele.style.left = (e.abstractData.x + 10) + 'px';
			
			ele.style.display = '';
			
			
			//start a custom drag event
			//A5.u.drag.start() is a helper function that allows you to create an anonymous 'drag' without
			// binding the 'drag' to a specific elemetn or event (for example, using A5.u.drag.add())
			//A5.u.drag.start() will end any currently active drags (such as scrolling in the list)
			A5.u.drag.start({
				ddEle: ele, // store away drag message elem for us in move/end funcs
				onMove: function(instData,settings){
					settings.ddEle.style.top = (instData.y+10) + 'px';
					settings.ddEle.style.left = (instData.x+10) + 'px';

				},
				onEnd: function(instData,settings){
				
					settings.ddEle.style.display = 'none';	
																	
					dragDrop.DOCS.active = false;
					
				}
			});
		
		dragDrop.DOCS.active = true;
		
		dragDrop.DOCS.data = {};
		
		$u.o.assign(dragDrop.DOCS.data,data);
		// store index of item
		dragDrop.DOCS.index = indx;
		
	}
});

$e.add(lObj2.contId,A5.d.evnts.up,function(e){
	// check to see if we are dragging from DOCS
	if(dragDrop.DOCS.active){
	//get the list we are dragging from
	var lObjDrag = {dialog.object}.getControl('DOCS');
	var lObjDrop = {dialog.object}.getControl('REQDOCS');
	// below is some test data not currently being used, but it does not work either. 
	var _d = [
		{Id: 1},
		{Id: 2}
	];
	var indx = lObjDrop.indexFromEvent(e);
	
	if(indx == -1) lObjDrop.appendRows(dragDrop.DOCS.data);
	else lObjDrop.insertRows(indx, dragDrop.DOCS.data);
	}
});

I tried using dummy data which is held in the variable _d and it also did not display in the destination list, just another blank space.
What am I missing?