Обнаружение падения в Drag & Drop (Adobe CC/HTML5/JavaScript)

Question

Я пытаюсь создать простое перетаскивание в Adobe CC.

У меня отлично работает функция перетаскивания, однако я не могу определить, когда перетаскиваемая кнопка попадает в цель.

Любая помощь будет принята с благодарностью!

Вот мой код:

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

Вам необходимо добавить атрибут данных ondragover к цели и установить его для этой функции:

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

По умолчанию данные / элементы не могут быть удалены в других элементах. Чтобы это произошло, вы должны запретить обработку элемента по умолчанию.

Примечание: Вам также может понадобиться добавить атрибут данных ondrop в целевой набор функций, чтобы фактическое удаление могло произойти.

ех.

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

И вот как должен выглядеть элемент html:

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