Changes between Version 8 and Version 9 of documentation/tutorials/Dragging

Author:

peterc (IP: 203.96.63.172)

Timestamp:

03/12/08 18:13:24 (9 years ago)

Comment:

--

documentation/tutorials/Dragging

@@ -33 +33 @@
- * ''drag'': If the left mouse button is pressed while over the element and dragged, the element will trigger a 'dragstart' event. Every subsequent time the mouse is moved, the element will trigger a 'drag' event. When the button is released, the element will trigger a 'dragend' event.
- * ''dragdrop'': As ''drag'', but as the mouse moves over other elements 'dragover' and 'dragout' events will be triggered (similarly to the 'mouseover' and 'mouseout' events). When the button is released, the element the mouse is hovering over will trigger the 'dragdrop' message.
-
+ from the original element
-
-So both ''drag'' and ''dragdrop'' only send messages; they don't actually drag any elements anywhere automatically. Very useful for complicated dragging operations or dragging multiple elements.
-
-== Step 3: Listening to the events ==
+
+Now that the items can be visibly dragged around, we need to actually change their parenting when they're dropped. Create a class which inherits from Rocket::Core::EventListener and give it a static method for registering the containers. Override the ProcessEvent() function as well so we can process the 'dragdrop' event.
+
+{{{
+#ifndef DRAGLISTENER_H
+#define DRAGLISTENER_H
+
+#include <Rocket/Core/EventListener.h>
+#include <Rocket/Core/Types.h>
+
+class DragListener : public Rocket::Core::EventListener
+{
+public:
+        /// Registers an elemenet as being a container of draggable elements.
+        static void RegisterDraggableContainer(Rocket::Core::Element* element);
+
+protected:
+        virtual void ProcessEvent(Rocket::Core::Event& event);
+};
+
+#endif
+}}}
+
+The RegisterDraggableContainer() function simply needs to attach the listener object to the 'dragdrop' event:
+
+{{{
+#include "DragListener.h"
+#include <Rocket/Core/Element.h>
+
+static DragListener drag_listener;
+
+// Registers an element as being a container of draggable elements.
+void DragListener::RegisterDraggableContainer(Rocket::Core::Element* element)
+{
+        element->AddEventListener("dragdrop", &drag_listener);
+}
+}}}
+
+The DragListener object will now receive a call to ProcessEvent() whenever an item is dropped on the registered elements or any of their children.
+
+=== The 'dragdrop' event ===
+
+The event we'll be processing is the 'dragdrop' event. This event is sent to the element that the dragged element was dropped onto. The dragged element itself can be queried from the event as the parameter 'drag_element'.
+
+We can now write a simple handler that will move dragged elements between the two containers:
+
+{{{
+void DragListener::ProcessEvent(Rocket::Core::Event& event)
+{
+        if (event == "dragdrop")
+        {
+                Rocket::Core::Element* container = event.GetCurrentElement();
+                Rocket::Core::Element* drag_element = static_cast< Rocket::Core::Element* >(event.GetParameter< void* >("drag_element", NULL));
+
+                drag_element->GetParentNode()->RemoveChild(drag_element);
+                container->AppendChild(drag_element);
+        }
+}
+}}}
+
+The container that received the drop is determined by ''event.GetCurrentElement()''. Events have both a target and a current element. The ''target element'' is the element the event was actually targetted at. The ''current element'' is the element the processing listener is observing; in our case, the container.
+
+The dragged element is simply removed from its old parent and attached to the container it was dropped onto.
+
+=== Registering the containers ===
+
+All that's left to do before we can try out the dragging is to register the containers. In the constructor of the Inventory object (top of Inventory.cpp), we need to register the inventory window as a draggable container; add the following line at the end of the constructor:
+
+{{{
+        DragListener::RegisterDraggableContainer(document->GetElementById("content"));
+}}}
+
+Fire it up, start dragging and see what happens.