When creating a FloatField in Unity, it will have a mouse dragger on the label. This dragger can edit the value of the FloatField by dragging the mouse. This is quite useful to change the value easily. But when the label value is not defined, the dragger won’t show up. This is because the dragger is actually on the label and not on the field. This results in the user not being able to drag the mouse to change the fields value.

Label defined (mouse dragger enabled)

Label undefined (mouse dragger disabled)

This problem can be fixed by creating your own FieldMouseDragger and connecting it to the field and label. Let’s start by creating the Label and FloatField that we will be used.

// Let's first create the label that we will be using to define the FieldMouseDragger on.
Label mouseDraggingLabel = new Label();
mouseDraggingLabel.text = "Dragging Label";

// Then create the field that it will be connected to.
FloatField floatFieldWithMouseDragger = new FloatField();

Next up we’ll be defining the actual mouse dragger. To define a mouse dragger we have to do three things.

• Create the mouse dragger (and define which field it will change).
• Set the drag zone (the area where the mouse dragger will be enabled).
• Set the uss class (to show the cursor).

Let’s implement that in our code.

// Now we're going to create a mouse dragger.
// The FloatField should be passed in the constructor.
// The data type is defined in the angle brackets (float for FloatField).
FieldMouseDragger<float> mouseDragger = 
                        new FieldMouseDragger<float>(floatFieldWithMouseDragger);

// Next we just have to set what area will be used as the drag zone.
// Set the drag zone by passing a visual element to the SetDragZone
mouseDragger.SetDragZone(mouseDraggingLabel);

// This will already work but it won't change the cursor yet. 
// For that we need to add a uss class.
// Add the uss class that will show it as a dragger on hover 
mouseDraggingLabel.AddToClassList(
                BaseField<float>.labelDraggerVariantUssClassName);

Result

This will create a FloatField and a separate Label that are connected using a FieldMouseDragger.

Sample

The complete sample can be found here: UI Toolkit mouse dragging label sample 🖱️.