kineticjs dom'dan tuvale resim sürükleyin ve bırakın

Question

Dom'a zaten yüklenmiş bir görüntü var ve bu resmi bir tuvalin içine sürükleyip tuvalin içine sürükleyip bunun üzerinden bir kineticjs nesnesi oluşturmak istiyorum.

Görüntüyü nasıl sürükleyebileceğimi bilmiyorum ve tuvalde nasıl davranacağını bilmiyorum. Birisi bana bunu nasıl yapılacağını gösterebilir mi?

Öğreticilerin çoğu, tuvalin içinden veya dosya sisteminden nasıl sürüklenip bırakılacağını gösterir. DOM'den tuvale nasıl sürükleneceğimi arıyorum.

Arka plan bilgisi: Bir kullanıcının fotoğrafını genişletmek için tuvali sürükleyip bırakabileceği bir menü sistemi veya küçük resimlere sahip olmak istiyorum.

Şimdiden teşekkürler!

Answer 1

Sorun değil!

1 html5 sayfasından "sürükle ve bırak" kullanmanız gerekir. Öğretici: konteyner nesne için

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

3 Olaylar:

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

Ve tabii tam örnek: görüntüye http://www.html5rocks.com/en/tutorials/dnd/basics/

2 kurulum dom olay http://jsfiddle.net/lavrton/n4w44/

sen sürükleyemezsiniz