CODEWITHSUNDEEP
drag-and-droptargeteaseljs
mvermand
mvermand

Reputation: 6137

Drop detection in easeljs

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

Upvotes: 1

Views: 1210

Answers (3)

Wenceslao Negrete
Wenceslao Negrete

Reputation: 556

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.

Upvotes: 0

Lanny
Lanny

Reputation: 11294

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

Upvotes: 2

renatopp
renatopp

Reputation: 1315

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

Upvotes: 1

Related Questions