kineticjs przeciągnij i upuść obraz z dom na płótno

Question

Mam już obraz załadowany na dom i chcę być w stanie przeciągnąć ten obraz na płótno i upuścić go na płótno i stworzyć z niego obiekt kineticjs.

Nie wiem, jak sprawić, aby obraz był przeciągalny i nie wiem, jak sprawić, by płótno reagowało na przeciąganie i upuszczanie zdarzeń, które już istnieją w domenie. Czy ktoś może mi pokazać, jak to zrobić?

Większość tutoriali pokazuje, jak przeciągać i upuszczać z płótna lub systemu plików, szukam sposobu przeciągania z DOM na płótno.

Informacje dodatkowe: Chcę mieć system menu lub kilka miniaturek, które użytkownik może przeciągnąć i upuścić na płótnie, aby rozwinąć zdjęcie.

Z góry dzięki!

Answer 1

Nie ma problemu!

1 Musisz użyć "przeciągnij i upuść" z html5. Tutorial: http://www.html5rocks.com/en/tutorials/dnd/basics/

2 setup dom wydarzenie do obrazka:

var dragSrcEl = null; 
//image 
document.getElementById("yoda").addEventListener('dragstart',function(e){ 
     dragSrcEl = this; 
}); 

3 imprezy dla obiektu kontenera:

var con = stage.getContainer();   
con.addEventListener('dragover',function(e){ 
    e.preventDefault(); // !!important 
}); 
//insert image to stage 
con.addEventListener('drop',function(e){ 
    var image = new Kinetic.Image({ 
     draggable : true 
    }); 
    layer.add(image); 
    imageObj = new Image(); 
    imageObj.src = dragSrcEl.src; 
    imageObj.onload = function(){ 
     image.setImage(imageObj) 
     layer.draw() 
    }; 
}); 

I oczywiście pełny przykład: http://jsfiddle.net/lavrton/n4w44/