How to get name of drop target

Saola Animate Support Questions
1

Hi,

I have 6 dragable items and 6 targets to drop them on. One item per target.
How do I check if the correct “box” is dropped on the correct target ? That is
box1 dropped on targetbox1, etc… is correct.

Thanks

var dragSourceNames = [‘drag1’,‘drag2’,‘drag3’,‘drag4,’,‘drag5’,‘drag6’];
.
.
.

for (var i = 1; i< 6;++i){

makeDroppable(doc.getElement(‘targetbox’+i),{

    drop: function(event, ui)
                         {
		          // get dropped element
		        var droppedDom = ui.draggable[0];
		        var droppedElement = doc.findElementByDom(droppedDom);
		         if (!droppedElement)
		          {
			        doc.getElement('log').setText('Error');
			          return;
		          }
	
		if (doc.myDroppedNames.indexOf(droppedElement.name) < 0)
		 {
		          if (doc.getElement == 'targetbox1')
		{
		alert("Box 1");
		}
			
			 if (droppedElement.name == 'drag1')
			{
			 alert('correct' +(i-1));
			}
			
			
			
		}		
		
	     }
});
2

Hi,

In drop event, “this” object is the drop target DOM element.
The drop target Saola Animate element will be doc.findElementByDom(this);
The overall script should look like below:

function onSceneActivated(doc, e) {
	// init drag drop
	var dragPrefix = 'drag';
	var dropPrefix = 'targetbox';
	var itemCount = 6;
	for (var i = 1; i <= itemCount; ++i) {
		makeDraggable(doc.getElement(dragPrefix + i));
		makeDroppable(doc.getElement(dropPrefix + i), {
			drop: function(event, ui) {
				var dragSource = doc.findElementByDom(ui.draggable[0]);
				var dropTarget = doc.findElementByDom(this);
				if (dragSource && dropTarget) {
					var resultString = dragSource.name.substring(dragPrefix.length) == dropTarget.name.substring(dropPrefix.length) ? 'correct' : 'incorrect';
					alert(dragSource.name  + ' is dropped into ' + dropTarget.name + ': ' + resultString);
				}
			}
		});
	};
}

dragdrop - center.saolapack (6.9 KB)

Regards

3

Awesome! Looks like what I needed.

Thanks!