Detect drop in Drag & Drop (Adobe CC/HTML5/JavaScript)

Question

I am trying to create a simple drag and drop activity in Adobe CC.

I have got the dragging function working fine, however I can't get it to detect when the dragged button hits the target.

Any help would be greatly appreciated!

Here is my code:

function Main()
{
  createjs.Touch.enable(stage);//Emable Touch Gesture Recognition
  createjs.Ticker.addEventListener("tick", this.update.bind(this)); 
  this.addTargetsToButtons();//Add Button Actions
}

var phonemes = ["s","a","t","p","i","n","m","d","g","o","c","k","ck","e","u","r","h","b","f","ff","l","ll","ss"];
var draggablePhonemes = [this.b0, this.b1, this.b2];
var targets = [this.target1];

Main.prototype.addTargetsToButtons= function(){//Add Actions To All Our Buttons

    for (i = 0; i<draggablePhonemes.length; i++){
    console.log(draggablePhonemes[i]);
    draggablePhonemes[i].addEventListener("pressmove", draggedStart.bind(this));
    draggablePhonemes[i].addEventListener("pressup",draggedStop.bind(this));
    draggablePhonemes[i].name = phonemes[i];

    }
}

function draggedStart(event) {

    console.log(event.currentTarget.name)

    var p = stage.globalToLocal(event.stageX, event.stageY);
    event.currentTarget.x = p.x;
    event.currentTarget.y = p.y;


    //The buttons can be dragged onto target1, target2, target3



}

function draggedStop(event) {

    console.log(event.currentTarget.name + " Has Stopped Moving")

    if (event.currentTarget.hitTest(targets[0].x,targets[0].y)){
        console.log("Collision");
    }



}

Answer 1

You need to add ondragover data attribute to the target and set it to this function:

function allowDrop(event) {
    event.preventDefault();
    console.log("Look, it hits the target");
}

By default, data/elements cannot be dropped in other elements. To allow that to happen, you must prevent the default handling of the element.

Note: You might also need to add ondrop data attribute to the target set to a function, so the actual drop can happen.

ex.

function drop(event) {
   event.preventDefault();
   var data = event.currentTarget.name;
   event.target.appendChild(document.getElementById(data));
}

And this is what the html element should look like:

<div ondrop="drop(event)" ondragover="allowDrop(event)"></div>