Drop detection in easeljs

Question

I'm new to EaselJS. I wonder how I can detect a drop of one container on another container in EaselJS. So I want to get the dropped container in an eventlistener of the drop target container. Any examples on this? I could not find this in the drag drop examples of EaselJS.

Thanks

score 2 · Answer 1 · edited May 23 '17 at 12:06

2

You can also use getObjectsUnderPoint. Here is a quick sample I put together. http://jsfiddle.net/lannymcnie/6rh7P/1/

var targets = stage.getObjectsUnderPoint(stage.mouseX, stage.mouseY);

This is from another post asking a similar question. I also posted more info about it. EaselJS: connect 2 containers/shapes using a line

edited May 23 '17 at 12:06

Community

1
1

answered Apr 22 '14 at 17:24

Lanny

11,244
1
22
30

Hmm... this fiddle uses shapes. If you use containers, then it won't work. It seems like containers are not detected by getObjectsUnderPoint – mvermand Apr 23 '14 at 11:43
Too late to add the fiddle: http://jsfiddle.net/vHg6L/ Drag the red container on the blue container: getObjectsUnderPoint returns an empty array. – mvermand Apr 23 '14 at 11:53

score 1 · Answer 2 · answered Apr 22 '14 at 01:11

In the pressmove or stagemouseup event, you can verify if the mouse position (stage.mouseX and stage.mouseY) if over the parent container. To do the verification, you can use the hitTest.

Notice that, hitTest will only if your parent container has at least one mouse event listener, which I think is a bug on EaselJS 0.7.1

score 0 · Answer 3 · answered Apr 13 '15 at 07:54

I made this class on coffeescript to solve that problem:

class DragContainer
    DragContainer.prototype = new createjs.Container()
    DragContainer::Container_initialize = DragContainer::initialize
    constructor: (opts) ->
        @initialize opts
    DragContainer::initialize = (opts) ->
        @Container_initialize()
        @droptargets = new Array()
        @on 'mousedown', @handleMouseDown
    handleMouseDown: (e) =>
        @on 'pressup', (ev)=>
            @removeAllEventListeners 'pressup'
            if @droptargets and @droptargets.length > 0
                @evaluateDrop e
    evaluateDrop: (e) =>
        target = null
        dropped = false
        for drop in @droptargets
            pt = drop.globalToLocal stage.mouseX, stage.mouseY
            if drop.hitTest pt.x, pt.y
                target = drop
                dropped = true
        if dropped
            @dispatchEvent {type: 'dropped', currentTarget: target}
        else
            @dispatchEvent {type: 'dropped', currentTarget: null}

The droptargets property is an array that keeps the objects you want to associate with the drop of your container.

Drop detection in easeljs

3 Answers3