[FIXED] PyQt5 move QDockWidget by dragging tab

Issue

The clip below shows dragging QDockWidgets between docking areas by dragging the tabs (not the title bar) - but when I try this with PyQt 5.15.0 it doesn't work, the tabs won't detach. How can I enable this behavior?

What I want:
https://www.screencast.com/t/lv83SoyVUhbd (from https://woboq.com/blog/qdockwidget-changes-in-56.html)

What I get:
https://www.screencast.com/t/bIUj4vLNTF

My code:

from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.QtCore import Qt

if __name__ == "__main__":
    app = QtWidgets.QApplication([])

    main = QtWidgets.QMainWindow()

    dock1 = QtWidgets.QDockWidget("Blue")
    dock2 = QtWidgets.QDockWidget("Green")
    dock3 = QtWidgets.QDockWidget("Red")

    content1 = QtWidgets.QWidget()
    content1.setStyleSheet("background-color:blue;")

    content2 = QtWidgets.QWidget()
    content2.setStyleSheet("background-color:green;")

    content3 = QtWidgets.QWidget()
    content3.setStyleSheet("background-color:red;")

    dock1.setWidget(content1)
    dock2.setWidget(content2)
    dock3.setWidget(content3)

    dock1.setAllowedAreas(Qt.AllDockWidgetAreas)
    dock2.setAllowedAreas(Qt.AllDockWidgetAreas)
    dock3.setAllowedAreas(Qt.AllDockWidgetAreas)

    main.addDockWidget(Qt.LeftDockWidgetArea, dock1)
    main.tabifyDockWidget(dock1, dock2)
    main.addDockWidget(Qt.RightDockWidgetArea, dock3)

    main.resize(400, 200)
    main.show()

    app.exec_()

Solution

The solution to my question was enabling the GroupedDragging with setDockOptions on the QMainWindow. I managed to get a really nice appearance & behavior exactly like I wanted with the code below.

Demo: https://www.screencast.com/t/GU5Z2ysT

from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.QtCore import Qt


class DockWidget(QtWidgets.QDockWidget):
    def __init__(self, title: str):
        super().__init__(title)
        self.setTitleBarWidget(QtWidgets.QWidget())
        self.dockLocationChanged.connect(self.on_dockLocationChanged)

    def on_dockLocationChanged(self):
        main: QtWidgets.QMainWindow = self.parent()
        all_dock_widgets = main.findChildren(QtWidgets.QDockWidget)

        for dock_widget in all_dock_widgets:
            sibling_tabs = main.tabifiedDockWidgets(dock_widget)
            # If you pull a tab out of a group the other tabs still see it as a sibling while dragging...
            sibling_tabs = [s for s in sibling_tabs if not s.isFloating()]

            if len(sibling_tabs) != 0:
                # Hide title bar
                dock_widget.setTitleBarWidget(QtWidgets.QWidget())
            else:
                # Re-enable title bar
                dock_widget.setTitleBarWidget(None)

    def minimumSizeHint(self) -> QtCore.QSize:
        return QtCore.QSize(100, 100)


if __name__ == "__main__":
    app = QtWidgets.QApplication([])
    main = QtWidgets.QMainWindow()

    dock1 = DockWidget("Blue")
    dock2 = DockWidget("Green")
    dock3 = DockWidget("Red")

    content1 = QtWidgets.QWidget()
    content1.setStyleSheet("background-color:blue;")
    content1.setMinimumSize(QtCore.QSize(50, 50))

    content2 = QtWidgets.QWidget()
    content2.setStyleSheet("background-color:green;")
    content2.setMinimumSize(QtCore.QSize(50, 50))

    content3 = QtWidgets.QWidget()
    content3.setStyleSheet("background-color:red;")
    content3.setMinimumSize(QtCore.QSize(50, 50))

    dock1.setWidget(content1)
    dock2.setWidget(content2)
    dock3.setWidget(content3)

    dock1.setAllowedAreas(Qt.AllDockWidgetAreas)
    dock2.setAllowedAreas(Qt.AllDockWidgetAreas)
    dock3.setAllowedAreas(Qt.AllDockWidgetAreas)

    main.addDockWidget(Qt.LeftDockWidgetArea, dock1)
    main.tabifyDockWidget(dock1, dock2)
    main.addDockWidget(Qt.RightDockWidgetArea, dock3)

    main.setDockOptions(main.GroupedDragging | main.AllowTabbedDocks | main.AllowNestedDocks)

    main.setTabPosition(Qt.AllDockWidgetAreas, QtWidgets.QTabWidget.North)
    main.resize(400, 200)
    main.show()

    app.exec_()

Answered By - pyjamas