qml- Unable to assign DragHandler to a parent window, window overlaps taskbar when maximizing - qml

Question

I have a frameless qml window with a custom window decoration I created. And I am trying to assign a DragHandler to the window decoration with the target being the window. But I a specific error and only the custom window decoration is being dragged inside the window, the rest of the window remains as it is (not being dragged).
Also this window decoration contains the maximize button which I defined myself, it perfectly works, however the taskbar cannot be accessed while the window is maximized.
Can anyone help me see what is going wrong here and fix this?
Here is the error I received
file:///D:/QML tutorial/Tutorial_UI/Tutorial_UI.qml:92:21: Unable to assign Tutorial_UI_QMLTYPE_11 to QQuickItem
And here is my code (window and the titlebar)
Window {
id: window
width: 640
height: 480
visible: true
title: qsTr("QNotepad")
property int previousX
property int previousY
color: "#272727"
flags: Qt.Window | Qt.FramelessWindowHint
TitleBar {
id: title_bar
color: (window.active) ? "#1A212B" : "#272727"
width: 645
height: 50
//draggable widget
DragHandler{
id: draghandler
target: window
}
Text {
id: titlebar_text
text: "QNotePad"
color: "white"
x: 20
y: 10
}
}
And my code for the maximize button
ToolbarButton {
id: max_btn
text: "🗖"
text_color: "white"
onClicked: {
window.visibility === Window.Maximized ? (window.showNormal(), max_btn.text = "🗖", title_bar.width = 645, title_bar.height = 50, tool_bar.width = 640, tool_bar.height = 50, close_btn.x = 595, max_btn.x = 545, min_btn.x = 505, view.height = 600, view.width = container.width) : (window.showMaximized(), max_btn.text = "🗗" , title_bar.width = Screen.width, tool_bar.width = Screen.width, close_btn.x = (Screen.width-45), max_btn.x = (Screen.width-95), min_btn.x = (Screen.width-135), view.height = (Screen.height-40), view.width = Screen.width)
}
x: 545
y: 0
}
```

Answer 1

Instead of using DragHandler, consider using MouseArea with drag.target set. e.g.
TitleBar {
MouseArea {
anchors.fill: parent
drag.target: window
}
}
Here's an example of MouseArea with drag.target working in a mock application:
import QtQuick
import QtQuick.Controls
Page {
background: Rectangle { color: "#8ac" }
NotePadApp {
id: app1
x: 200
y: 200
}
NotePadApp {
id: app2
x: 400
y: 100
}
}
// NotePadApp.qml
import QtQuick
import QtQuick.Controls
Page {
id: page
width: 400
height: 400
header: TitleBar {
MouseArea {
anchors.fill: parent
drag.target: page
}
}
Frame {
anchors.fill: parent
}
}
// TitleBar.qml
import QtQuick
import QtQuick.Controls
Rectangle {
width: parent.width
height: titleText.height + 20
color: "#888"
property string title: "QNotePad"
Text {
id: titleText
x: 10
y: 10
text: title
color: "white"
}
}
You can Try it Online!