Added DragEnter, DragOver and DragLeave events for drop zones.

Author: photonstorm

v3/src/input/InteractiveObject.js

@@ -12,6 +12,8 @@ var InteractiveObject = function (gameObject, hitArea, hitAreaCallback)
         draggable: false,
         dropZone: false,
 
+        target: null,
+
         hitArea: hitArea,
         hitAreaCallback: hitAreaCallback,
 

v3/src/input/local/components/ProcessDragEvents.js

@@ -10,6 +10,8 @@ var ProcessDragEvents = function (pointer, time)
     }
 
     var i;
+    var c;
+    var overGameObject;
     var gameObject;
     var list;
     var input;
@@ -126,6 +128,17 @@ var ProcessDragEvents = function (pointer, time)
     //  4 = Pointer actively dragging the draglist and has moved
     if (pointer.dragState === 4 && pointer.justMoved)
     {
+        //  Let's filter out currentlyOver for dropZones only
+        var dropZones = [];
+
+        for (c = 0; c < currentlyOver.length; c++)
+        {
+            if (currentlyOver[c].input.dropZone)
+            {
+                dropZones.push(currentlyOver[c]);
+            }
+        }
+
         list = this._drag[pointer.id];
 
         for (i = 0; i < list.length; i++)
@@ -140,12 +153,57 @@ var ProcessDragEvents = function (pointer, time)
             // input.dragX = pointer.x - input.localX;
             // input.dragY = pointer.y - input.localY;
 
+            //  If this GO has a target then let's check it
+            if (input.target)
+            {
+                var index = dropZones.indexOf(input.target);
+
+                //  Got a target, are we still over it?
+                if (index === 0)
+                {
+                    //  We're still over it, and it's still the top of the display list, phew ...
+                    this.events.dispatch(new InputEvent.DRAG_OVER(pointer, gameObject, input.target));
+                }
+                else if (index > 0)
+                {
+                    //  Still over it but it's no longer top of the display list (targets must always be at the top)
+                    this.events.dispatch(new InputEvent.DRAG_LEAVE(pointer, gameObject, input.target));
+
+                    input.target = dropZones[0];
+
+                    this.events.dispatch(new InputEvent.DRAG_ENTER(pointer, gameObject, input.target));
+                }
+                else
+                {
+                    //  Nope, we've moved on (or the target has!), leave the old target
+                    this.events.dispatch(new InputEvent.DRAG_LEAVE(pointer, gameObject, input.target));
+
+                    //  Anything new to replace it?
+                    //  Yup!
+                    if (dropZones[0])
+                    {
+                        input.target = dropZones[0];
+
+                        this.events.dispatch(new InputEvent.DRAG_ENTER(pointer, gameObject, input.target));
+                    }
+                    else
+                    {
+                        //  Nope
+                        input.target = null;
+                    }
+                }
+            }
+            else if (!input.target && dropZones[0])
+            {
+                input.target = dropZones[0];
+
+                this.events.dispatch(new InputEvent.DRAG_ENTER(pointer, gameObject, input.target));
+            }
+
             this.events.dispatch(new InputEvent.DRAG(pointer, gameObject));
 
             input.onDrag(gameObject, pointer);
         }
-
-        //  Check drop zones
     }
 
     //  5 = Pointer actively dragging but has been released, notify draglist
@@ -164,9 +222,9 @@ var ProcessDragEvents = function (pointer, time)
             input.dragY = input.localY - gameObject.displayOriginY;
 
             //  Any drop zones here?
-            for (var c = 0; c < currentlyOver.length; c++)
+            for (c = 0; c < currentlyOver.length; c++)
             {
-                var overGameObject = currentlyOver[c];
+                overGameObject = currentlyOver[c];
 
                 if (overGameObject.input.dropZone)
                 {

v3/src/input/local/events/DragEnterEvent.js

@@ -0,0 +1,29 @@
+var Class = require('../../../utils/Class');
+var Event = require('../../../events/Event');
+
+var DragEnterEvent = new Class({
+
+    Extends: Event,
+
+    initialize:
+
+    function DragEnterEvent (pointer, gameObject, dropZone)
+    {
+        Event.call(this, 'DRAG_ENTER_EVENT');
+
+        //  The Pointer that triggered the event
+        this.pointer = pointer;
+
+        //  The native DOM event (MouseEvent, TouchEvent, etc)
+        this.event = pointer.event;
+
+        //  The Game Object the event occurred on
+        this.gameObject = gameObject;
+
+        //  The drop zone the game object was dropped on
+        this.dropZone = dropZone;
+    }
+
+});
+
+module.exports = DragEnterEvent;

v3/src/input/local/events/DragLeaveEvent.js

@@ -0,0 +1,29 @@
+var Class = require('../../../utils/Class');
+var Event = require('../../../events/Event');
+
+var DragLeaveEvent = new Class({
+
+    Extends: Event,
+
+    initialize:
+
+    function DragLeaveEvent (pointer, gameObject, dropZone)
+    {
+        Event.call(this, 'DRAG_LEAVE_EVENT');
+
+        //  The Pointer that triggered the event
+        this.pointer = pointer;
+
+        //  The native DOM event (MouseEvent, TouchEvent, etc)
+        this.event = pointer.event;
+
+        //  The Game Object the event occurred on
+        this.gameObject = gameObject;
+
+        //  The drop zone the game object was dropped on
+        this.dropZone = dropZone;
+    }
+
+});
+
+module.exports = DragLeaveEvent;

v3/src/input/local/events/DragOverEvent.js

@@ -0,0 +1,29 @@
+var Class = require('../../../utils/Class');
+var Event = require('../../../events/Event');
+
+var DragOverEvent = new Class({
+
+    Extends: Event,
+
+    initialize:
+
+    function DragOverEvent (pointer, gameObject, dropZone)
+    {
+        Event.call(this, 'DRAG_OVER_EVENT');
+
+        //  The Pointer that triggered the event
+        this.pointer = pointer;
+
+        //  The native DOM event (MouseEvent, TouchEvent, etc)
+        this.event = pointer.event;
+
+        //  The Game Object the event occurred on
+        this.gameObject = gameObject;
+
+        //  The drop zone the game object was dropped on
+        this.dropZone = dropZone;
+    }
+
+});
+
+module.exports = DragOverEvent;

v3/src/input/local/events/DropEvent.js

@@ -22,17 +22,6 @@ var DropEvent = new Class({
 
         //  The drop zone the game object was dropped on
         this.dropZone = dropZone;
-
-        //  The local x/y coordinates of the event within the Game Object
-        // this.x = pointer.x;
-        // this.y = pointer.y;
-
-        // this.dragX = gameObject.input.dragX;
-        // this.dragY = gameObject.input.dragY;
-
-        //  The local x/y coordinates of the event within the Game Object
-        // this.dragX = pointer.x - gameObject.input.dragX;
-        // this.dragY = pointer.y - gameObject.input.dragY;
     }
 
 });

v3/src/input/local/events/index.js

@@ -2,10 +2,13 @@
 
 module.exports = {
 
-    DROP: require('./DropEvent'),
     DRAG: require('./DragEvent'),
     DRAG_END: require('./DragEndEvent'),
+    DRAG_ENTER: require('./DragEnterEvent'),
+    DRAG_LEAVE: require('./DragLeaveEvent'),
+    DRAG_OVER: require('./DragOverEvent'),
     DRAG_START: require('./DragStartEvent'),
+    DROP: require('./DropEvent'),
 
     GAME_OBJECT_DOWN: require('./GameObjectDownEvent'),
     GAME_OBJECT_MOVE: require('./GameObjectMoveEvent'),