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>

检测Drag＆amp ;;中的下降删除（Adobe CC / HTML5 / JavaScript）

1 个答案: