kineticjs перетащите изображение из dom в холст

У меня уже есть изображение, загруженное на dom, и я хочу иметь возможность перетащить это изображение в холст и поместить его в холст и создать из него объект kineticjs.

Я не знаю, как сделать изображение перетаскиваемым, и я не знаю, как заставить холст реагировать на перетаскивание событий, которые уже существуют на dom. Кто-нибудь может показать мне, как это делается?

большинство учебников показывают, как перетаскивать из холста или файловой системы, я глядя, как перетащить из DOM на холст.

Справочная информация: Я хочу иметь систему меню или кучу эскизов, которые пользователь может перетащить на холст, чтобы развернуть фотографию.

спасибо заранее!

1 ответов


нет проблем!

1 Вы должны использовать "перетаскивание" из html5. Учебник: http://www.html5rocks.com/en/tutorials/dnd/basics/

2 Настройка события dom на изображение:

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

3 события для объекта контейнера:

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

и конечно полный пример: http://jsfiddle.net/lavrton/n4w44/