0

我正在尝试在 Adob​​e 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");
    }



}
4

1 回答 1

0

您需要将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>
于 2017-11-02T19:28:21.997 回答