how to drag image outside kinetic.js and drop it in, then either be like a image, or as a pattern to a rect

Question

I give the image sth like:

<img src = "images/dress_1.jpeg" draggable="true" ondragstart="drag(event)" />

And give the kinetic div sth like:

<div id="container" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
// of course in <script>
var stage = new Kinetic.Stage({
    container: 'container',
    width: 600,
    height: 600,
});

I have a rect with image as pattern, like:

var rectArea_1 = new Kinetic.Rect({
    fillPatternImage: images.topLeft, //in sources, {topLeft: 'http://...', ...}
});

Then in js:

function allowDrop(ev)
{
    ev.preventDefault();
}
function drag(ev)
    {
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
    ev.preventDefault();
    data = ev.dataTransfer.getData("Text");
    img_received = document.getElementById(data);

}

For the drop function, I guess if I add two lines like this:

function drop(ev)
{
        ev.preventDefault();
        data = ev.dataTransfer.getData("Text");
        img_received = document.getElementById(data);
        sources.topRight = img_received.src;
        loadImages(sources, function(images) {draw(images);});

}

It will work, but I am trying to put the last two lines in:

rectArea_2.on('dragend', function() {
    sources.topRight = img_received.src;
    loadImages(sources, function(images) {draw(images);});
});

But This Not Work. Any suggestions? THX

Answer 1

The Kinetic dragend handler does not listen for non-Kinetic drag-drop events.

Instead, Kinetic dragend fires when the Kinetic object has been dragged and released.

Are you trying to drop an external element directly on a Kinetic rect?

If so, you need to listen for the drop event on #container (as you do above).

Then get the element that was dropped (as you do).

Then get the current position of that dropped element and hit-test against rects on your stage.

Finally you can create an Image() object from the dropped element and fillpattern the hit rect.

[Additional detail]

To get the mouse position at drop:

    var c=document.getElementById("container");
    var x=event.pageX-c.offsetLeft;
    var y=event.pageY-c.offsetTop;