드래그 앤 드롭에서 드롭 감지 (Adobe CC/HTML5/JavaScript)

Question

Adobe CC에서 간단한 끌어서 놓기 작업을 만들려고합니다.

드래그 기능이 제대로 작동하지만 드래그 한 단추가 대상을 눌렀을 때이를 감지 할 수 없습니다.

도움이 될 것입니다.

대상에 데이터 속성으로 onDragOver 을 추가하고이 기능을 설정해야

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

: 기본적으로

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>