Changes between Version 11 and Version 12 of documentation/tutorials/Dragging

Author:

peterc (IP: 203.96.63.172)

Timestamp:

03/13/08 12:31:42 (9 years ago)

Comment:

--

documentation/tutorials/Dragging

@@ -91 +91 @@
-        if (event == "dragdrop")
-        {
-
+dest_
-                Rocket::Core::Element* drag_element = static_cast< Rocket::Core::Element* >(event.GetParameter< void* >("drag_element", NULL));
-
-                drag_element->GetParentNode()->RemoveChild(drag_element);
-
+dest_
-        }
-}
-}}}
-
-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.
-
-[[Image(tutorial_drag_2.jpg, nolink)]]
+
+Success!
+
+== Step 4: Sorting ==
+
+Currently, regardless of where you drag an item to it will end up as the last item in the window. It would be great if you could sort the items within a window by dragging them on top of each other. To do this, the ProcessEvent() function will need to determine both the container and the item within that container an element was dragged onto.
+
+Easy! We've attached as a 'dragdrop' listener to the item containers. This means we'll be notified whenever the 'dragdrop' event is sent to the containers or any of their children (i.e., their items). Each event has a ''target'' element and a ''current'' element. The target element is the element the event was actually targetted at; in the case of 'dragdrop', the element that was dropped on. The current element is the element the processing listener is observing; in our case, the container.
+
+So we can find the destination item and container with the following:
+
+{{{
+void DragListener::ProcessEvent(Rocket::Core::Event& event)
+{
+        if (event == "dragdrop")
+        {
+                Rocket::Core::Element* dest_container = event.GetCurrentElement();
+                Rocket::Core::Element* dest_element = event.GetTargetElement();
+                Rocket::Core::Element* drag_element = static_cast< Rocket::Core::Element* >(event.GetParameter< void* >("drag_element", NULL));
+}}}
+
+If the dragged item is dropped directly onto a container, then the current and target elements will be the same. In this case, we want to keep the old processing:
+
+{{{
+                if (dest_container == dest_element)
+                {
+                        // The dragged element was dragged directly onto a container.
+                        drag_element->GetParentNode()->RemoveChild(drag_element);
+                        dest_container->AppendChild(drag_element);
+                }
+}}}
+
+Otherwise, we want to insert the item into its new container ''before'' the item it was dragged onto.
+
+{{{
+                else
+                {
+                        // The dragged element was dragged onto an item inside a container. In order to get the
+                        // element in the right place, it will be inserted into the container before the item
+                        // it was dragged on top of.
+                        Rocket::Core::Element* insert_before = dest_element;
+
+                        drag_element->GetParentNode()->RemoveChild(drag_element);
+                        dest_container->InsertBefore(drag_element, insert_before);
+                }
+}}}
+
+Run the app again and try it out. All good, except try dragging an item onto another item within the same window; in this case, it should be inserted ''after'' the element it is dragged onto, not before. So, just fix that up in the event handler and you're done!
+
+You can find the fully-completed source in the drag sample.