KDE Logo
Guidelines
Basics
Menus
Toolbar
Statusbar
Content Area
Dialogs
Keys
Mouse
Drag and Drop

printable version (ps)/(pdf)
Links
Icon Style Guide
KDE User InterfaceStandards

Drag and Drop

Drag & Drop allows the user to drag an object across the desktop and to drop it onto some other object. The user starts a drag by clicking on an object with the left mouse button (LMB) and, while keeping the mouse button pressed, moving the mouse. An icon representing the dragged object will now follow the mouse pointer. When the user releases the mouse button, the object is dropped.

Drag & Drop can be an efficient way to select an interaction between two objects if both objects are visible on the desktop. The Drag & Drop action itself selects the two objects. After the drop, a popup menu should be shown which allows the user to select the desired action.

The following two sections describe the Drag and the Drop in more detail.

The Drag

To prevent unintented drags in the case where the user wants to click on the object but accidently moves the mouse a little, drags should not start immediately. Only after the mouse has moved a certain number of pixels should the drag actually start. If the user releases the mouse button before the drag has actually started, the action should be considered a single mouse click (SC). Note that the origin of the drag is where the mouse button was pressed. The origin is NOT where the mouse pointer is when the drag starts! (a small but subtle difference)

Example

The following picture illustrates a Drag & Drop operation. The user presses the LMB at point A and then moves the mouse along the black line, via point B, to point to C, where the user releases the LMB.
The actual drag will start at point B but it is the object at point A that is being dragged.

drag and drop operation
Implementation Note

The following example code leads to the desired behaviour:

void myWidget::mousePressEvent( QMouseEvent *e )
{
    // Only interested in LMB
    if( !(e->state() & LeftButton)) return;
    // Store the position of the mouse press.
    mPos = e->pos();
}

void myWidget::mouseMoveEvent( QMouseEvent *e )
{
    // Only interested in LMB
    if( !(e->state() & LeftButton)) return;

    // Check whether the user has moved far enough.
    int delay = QApplication::startDragDistance();
    if ( (mPos - e.pos()).manhattanLength() > delay )
    {
       // Find color at the position of the mouse press (mPos)
       QColor myColor = colorAtPos(mPos);
       // Create a drag-object for myColor
       KColorDrag *d = KColorDrag::makeDrag( myColor, this);
       // Start the drag
       d->dragCopy();
    }
}

If, while dragging, the mouse pointer is above an object on which a drop is possible, this object should change its visual appearance to indicate that a drop would mean dropping into this very object. If a drop is NOT possible, the mouse-pointer should change into a stop-sign.

Implementation Note

In a dragEnterEvent method one can indicate whether a drop is possible or not. Qt takes care of changing the mouse pointer accordingly. See the Drag & Drop section in the Qt documentation for more details.

void myOtherWidget::dragEnterEvent( QDragEnterEvent *event)
{
     if (!KColorDrag::canDecode( event)) 
     {
	event->accept(false); // We don't support this type
        return;
     }
     highlight(); // Change visual appearance to indicate we accept drop.
     event->accept( true ); // Tell Qt we are willing to accept the drop.
}

Pressing ESC during the drag cancels the Drag & Drop operation.

The Drop

A drop causes a popup menu to appear that offers possible actions. Typical actions are: Move, Copy and Link.

The popup menu should always contain Cancel as the last option.

There should also be a popup menu if there is only one action (other than Cancel) possible. Actions that aren't possible should not appear in the menu.

If, while dragging, a drop is not possible at the location of the mouse pointer and/or there are no actions possible at all, the mouse cursor should change into a stop-sign. Doing a drop at such a location effectively cancels the whole Drag & Drop operation.

Experienced users may speed this process up a bit by keeping a modifier key down when the dragged object is dropped. If any of the following modifier keys is pressed during the drop, no popup menu will appear but the related action will be selected immediately.

  • Shift - Move
  • Ctrl - Copy
  • Shift+Ctrl - Link

If, in this case, the selected action is not possible at the location of the mouse-pointer, the mouse pointer should change into a stop-sign. A drop at such location effectively cancels the whole Drag & Drop operation.

Previous Previous