Drag and Drop Control

#1
Have the content that you want to move as a single Gui object or object hierarchy. Make that the child of the GuiDragAndDropControl.

Position the GuiDragAndDropControl, add it to the canvas' content and then call "startDragging" supplying an offset to the mouse pointer for where to place the drag control.

Usually you'd also want to set "deleteOnMouseUp" so the drag control gets deleted automatically when the drag is complete.

As the drag control moves across the canvas it will call "onControlDragged" on GuiControls that it is hovering over and finally call "onControlDropped" when it is dropped onto some control. All these callbacks receive the drag control child (drag&drop payload) and a current position as argument.

In "onControlDropped" do something with the payload being received (or just let the drag control tree be deleted).

There's also some uses of GuiDragAndDropControl in the tools scripts that might serve as examples.

#2 Ah, one more thing: if you are having multiple different kinds of drags on your GUI and it is important for controls to only react to drags with the right content type, add information to GuiDragAndDropControl and check that in the callbacks.

In the tools scripts, I'm doing that setting a class on the drag control and then checking in the callbacks if the drag control's class is in a certain namespace hierarchy. This way, drag content types can have inheritance.

In the beta, an example of this can be found in tools/base/utils/swatchButtons.ed.cs which implements the drag&drop functionality between color swatch buttons.

#3 Hi,

Could u post up a simple example regarding the usage? Somehow swatchButtons.ed.cs is missing from my files. Thanks!

#4 swatchButton.ed.cs only comes with the current beta.

Here's the main contents with some extra comments:

//---------------------------------------------------------------------------------------------

function GuiSwatchButtonCtrl::onMouseDragged( %this )
{
   // Create the contents that we are about to drag around.

   %payload = new GuiSwatchButtonCtrl();
   %payload.assignFieldsFrom( %this );
   %payload.position = "0 0 ";
   %payload.dragSourceControl = %this;

   // Calc pos information.
   
   %xOffset = getWord( %payload.extent, 0 ) / 2;
   %yOffset = getWord( %payload.extent, 1 ) / 2;  
   %cursorpos = Canvas.getCursorPos();
   %xPos = getWord( %cursorpos, 0 ) - %xOffset;
   %yPos = getWord( %cursorpos, 1 ) - %yOffset;

   // Create the drag control.
   
   %ctrl = new GuiDragAndDropControl()
   {
      canSaveDynamicFields    = "0";
      Profile                 = "GuiSolidDefaultProfile";
      HorizSizing             = "right";
      VertSizing              = "bottom";
      Position                = %xPos SPC %yPos;
      extent                  = %payload.extent;
      MinExtent               = "4 4";
      canSave                 = "1";
      Visible                 = "1";
      hovertime               = "1000";
      deleteOnMouseUp         = true; // So the drag control deletes itself on completion; already takes drag contents with it when we haven't moved it some place else.
      class                   = "GuiDragAndDropControlType_ColorSwatch"; // To identify the type of the drag.  Can be done in other ways as well.
   };

   // Add drag content to control.
   
   %ctrl.add( %payload );
   
   // Start drag.
   
   Canvas.getContent().add( %ctrl ); // Add to canvas' content.
   %ctrl.startDragging( %xOffset, %yOffset ); // Start drag with mouse-relative offset.
}

//---------------------------------------------------------------------------------------------

// This is called when dropping something on a GuiSwatchButtonCtrl.
function GuiSwatchButtonCtrl::onControlDropped( %this, %payload, %position )
{
   // Make sure we have the right type of drag.

   if( !%payload.parentGroup.isInNamespaceHierarchy( "GuiDragAndDropControlType_ColorSwatch" ) )
      return;
      
   // If dropped on same button whence we came from,
   // do nothing.
   
   if( %payload.dragSourceControl == %this )
      return;

   // If a swatch button control is dropped onto this control,
   // copy it's color.
   
   if( %payload.isMemberOfClass( "GuiSwatchButtonCtrl" ) )
   {
      // If the swatch button is part of a color-type inspector field,
      // remember the inspector field so we can later set the color
      // through it.

      if( %this.parentGroup.isMemberOfClass( "GuiInspectorTypeColorI" ) )
         %this.parentGroup.apply( ColorFloatToInt( %payload.color ) );
      else if( %this.parentGroup.isMemberOfClass( "GuiInspectorTypeColorF" ) )
      %this.parentGroup.apply( %payload.color );
      else
         %this.color = %payload.color;
   }
}

#5 So is drag and drop already implimented in T3D or do we still need to dredge up the old resource?

#6
This is stock Torque 3D functionality.

#7 oh SWEET!!!

#8 Was going to ask a question but never mind, I figured it out.
Edited post because it was way off track.