ドラッグアンドドロップでドロップを検出する（Adobe CC/HTML5/JavaScript）

Question

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"); 
    } 



} 

Answer 1

あなたがターゲットには、OnDblClickデータ属性を追加し、この機能に設定する必要があります。

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

デフォルトでは、データ/要素にすることはできません他の要素に落ちた。これを可能にするには、要素のデフォルトの処理を禁止する必要があります。

注：ます。また、実際のドロップが発生する可能性がありますので、機能に設定された目標に ondropデータ属性を追加する必要があります。

ex。

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>