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

May be usefull: http://stackoverflow.com/questions/16271450/kineticjs-drag-and-drop-image-from-dom-into-canvas/16311898#16311898 — lavrton, Sep 07 '13 at 12:15

markE · Accepted Answer · 2013-09-07T16:35:58.877

0

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;

edited Sep 07 '13 at 16:35

answered Sep 07 '13 at 06:16

markE

102,905
11
164
176

Lots of thanks!! And I got your awesome answer to another question I post, you solved my problem completely!! – Wendy Sep 07 '13 at 13:48
One more question, how can I get the current position of that dropped element? Should I use event.clientX on some mouse event, or use shape.getPosition().x, but I suppose this will require create an image first. Or some other way? – Wendy Sep 07 '13 at 14:50
You'll want to get the position from the external event ;) – markE Sep 07 '13 at 15:30
could you be a little more specific? I am new to this and find it really fun! – Wendy Sep 07 '13 at 15:33
Sure! The mouseXY upon drop is the event.client position minus the kinetic container offset position. See the addition to my answer :) BTW, you might consider using jQuery to avoid some differences occurring in older browsers. Have Fun! – markE Sep 07 '13 at 16:35
great, i will give it a try!! – Wendy Sep 07 '13 at 17:12

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

1 Answers1