QmlDesigner: Add drag'n'drop to PropertyEditorView

* Implement drag and drop for UrlChooser and FontComboBox
* Change the style of controls accepting drag payload and drag hovering.
  Utilize states for those styles.
* Fix aspect ratio of drag pixmap
* Fix issue that causes drag to continue after pressing the escape key

Change-Id: I5cf67175abe936e60e8af00fa8c2f7a2dec355b3
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
Reviewed-by: <github-actions-qt-creator@cristianadam.eu>
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>

15 files changed, 191 insertions, 43 deletions

diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontComboBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontComboBox.qml
index 6d9f56b178..8c05fa2f87 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontComboBox.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontComboBox.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2021 The Qt Company Ltd.
+** Copyright (C) 2022 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -36,6 +36,7 @@ StudioControls.ComboBox {
     property string fontFilter: "*.ttf *.otf"
     property bool showExtendedFunctionButton: true
 
+    hasActiveDrag: activeDragSuffix !== "" && root.fontFilter.includes(activeDragSuffix)
     labelColor: colorLogic.textColor
     editable: true
 
@@ -47,16 +48,43 @@ StudioControls.ComboBox {
         filter: root.fontFilter
     }
 
+    DropArea {
+        id: dropArea
+
+        anchors.fill: parent
+
+        property string assetPath: ""
+
+        onEntered: function(drag) {
+            dropArea.assetPath = drag.getDataAsString(drag.keys[0]).split(",")[0]
+            drag.accepted = root.hasActiveDrag
+            root.hasActiveHoverDrag = drag.accepted
+        }
+
+        onExited: root.hasActiveHoverDrag = false
+
+        onDropped: function(drop) {
+            drop.accepted = root.hasActiveHoverDrag
+            var fontLoader = root.createFontLoader("file:///" + dropArea.assetPath)
+            root.backendValue.value = fontLoader.name
+            root.currentIndex = root.find(root.backendValue.value)
+            root.hasActiveHoverDrag = false
+            root.backendValue.commitDrop(dropArea.assetPath)
+        }
+    }
+
     function createFontLoader(fontUrl) {
         return Qt.createQmlObject('import QtQuick 2.0; FontLoader { source: "' + fontUrl + '"; }',
                                   root, "dynamicFontLoader")
     }
 
     function setupModel() {
-        var familyNames = ["Arial", "Times New Roman", "Courier", "Verdana", "Tahoma"] // default fonts
+        // default fonts
+        var familyNames = ["Arial", "Times New Roman", "Courier", "Verdana", "Tahoma"]
 
         for (var i = 0; i < fileModel.model.length; ++i) { // add custom fonts
-            var fontLoader = createFontLoader(fileModel.docPath + "/" + fileModel.model[i].relativeFilePath)
+            var fontLoader = root.createFontLoader(fileModel.docPath + "/"
+                                                   + fileModel.model[i].relativeFilePath)
             familyNames.push(fontLoader.name)
         }
 
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/UrlChooser.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/UrlChooser.qml
index ec246f56f2..ecb4936bd7 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/UrlChooser.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/UrlChooser.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2021 The Qt Company Ltd.
+** Copyright (C) 2022 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -63,6 +63,7 @@ Row {
 
         property ListModel listModel: ListModel {}
 
+        hasActiveDrag: activeDragSuffix !== "" && root.filter.includes(activeDragSuffix)
         implicitWidth: StudioTheme.Values.singleControlColumnWidth
                         + StudioTheme.Values.actionIndicatorWidth
         width: implicitWidth
@@ -72,6 +73,30 @@ Row {
         // when the combobox is closed by focusing on some other control.
         property int hoverIndex: -1
 
+        DropArea {
+            id: dropArea
+
+            anchors.fill: parent
+
+            property string assetPath: ""
+
+            onEntered: function(drag) {
+                dropArea.assetPath = drag.getDataAsString(drag.keys[0]).split(",")[0]
+                drag.accepted = comboBox.hasActiveDrag
+                comboBox.hasActiveHoverDrag = drag.accepted
+            }
+
+            onExited: comboBox.hasActiveHoverDrag = false
+
+            onDropped: function(drop) {
+                drop.accepted = comboBox.hasActiveHoverDrag
+                comboBox.editText = dropArea.assetPath
+                comboBox.accepted()
+                comboBox.hasActiveHoverDrag = false
+                root.backendValue.commitDrop(dropArea.assetPath)
+            }
+        }
+
         ToolTip {
             id: toolTip
             visible: comboBox.hover && toolTip.text !== ""
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckIndicator.qml
index 2d3bb74c3f..5af0f5fe6e 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckIndicator.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckIndicator.qml
@@ -37,6 +37,9 @@ Rectangle {
     property bool pressed: checkIndicatorMouseArea.containsPress
     property bool checked: false
 
+    property bool hasActiveDrag: myControl.hasActiveDrag ?? false
+    property bool hasActiveHoverDrag: myControl.hasActiveHoverDrag ?? false
+
     color: StudioTheme.Values.themeControlBackground
     border.width: 0
 
@@ -79,13 +82,21 @@ Rectangle {
             name: "default"
             when: myControl.enabled && checkIndicator.enabled && !myControl.edit
                   && !checkIndicator.hover && !myControl.hover && !myControl.drag
-                  && !checkIndicator.checked
+                  && !checkIndicator.checked && !checkIndicator.hasActiveDrag
             PropertyChanges {
                 target: checkIndicator
                 color: StudioTheme.Values.themeControlBackground
             }
         },
         State {
+            name: "dragHover"
+            when: myControl.enabled && checkIndicator.hasActiveHoverDrag
+            PropertyChanges {
+                target: checkIndicator
+                color: StudioTheme.Values.themeControlBackgroundInteraction
+            }
+        },
+        State {
             name: "globalHover"
             when: myControl.enabled && checkIndicator.enabled && !myControl.drag
                   && !checkIndicator.hover && myControl.hover && !myControl.edit
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml
index 70cbdf000e..f57a1c404e 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml
@@ -50,9 +50,6 @@ T.ComboBox {
 
     property alias textInput: comboBoxInput
 
-    property int borderWidth: myComboBox.hasActiveHoverDrag ? StudioTheme.Values.borderHover
-                                                            : StudioTheme.Values.border
-
     signal compressedActivated(int index, int reason)
 
     enum ActivatedReason { EditingFinished, Other }
@@ -61,7 +58,7 @@ T.ComboBox {
     height: StudioTheme.Values.defaultControlHeight
 
     leftPadding: actionIndicator.width
-    rightPadding: popupIndicator.width + myComboBox.borderWidth
+    rightPadding: popupIndicator.width + StudioTheme.Values.border
     font.pixelSize: StudioTheme.Values.myFontSize
     wheelEnabled: false
 
@@ -91,7 +88,6 @@ T.ComboBox {
 
         myControl: myComboBox
         text: myComboBox.editText
-        borderWidth: myComboBox.borderWidth
 
         onEditingFinished: {
             comboBoxInput.deselect()
@@ -113,16 +109,16 @@ T.ComboBox {
         myControl: myComboBox
         myPopup: myComboBox.popup
         x: comboBoxInput.x + comboBoxInput.width
-        y: myComboBox.borderWidth
-        width: StudioTheme.Values.checkIndicatorWidth - myComboBox.borderWidth
-        height: StudioTheme.Values.checkIndicatorHeight - myComboBox.borderWidth * 2
+        y: StudioTheme.Values.border
+        width: StudioTheme.Values.checkIndicatorWidth - StudioTheme.Values.border
+        height: StudioTheme.Values.checkIndicatorHeight - StudioTheme.Values.border * 2
     }
 
     background: Rectangle {
         id: comboBoxBackground
         color: StudioTheme.Values.themeControlBackground
         border.color: StudioTheme.Values.themeControlOutline
-        border.width: myComboBox.borderWidth
+        border.width: StudioTheme.Values.border
         x: actionIndicator.width
         width: myComboBox.width - actionIndicator.width
         height: myComboBox.height
@@ -149,7 +145,7 @@ T.ComboBox {
         width: comboBoxPopup.width - comboBoxPopup.leftPadding - comboBoxPopup.rightPadding
                - (comboBoxPopupScrollBar.visible ? comboBoxPopupScrollBar.contentItem.implicitWidth
                                                    + 2 : 0) // TODO Magic number
-        height: StudioTheme.Values.height - 2 * myComboBox.borderWidth
+        height: StudioTheme.Values.height - 2 * StudioTheme.Values.border
         padding: 0
         enabled: model.enabled === undefined ? true : model.enabled
 
@@ -203,9 +199,9 @@ T.ComboBox {
 
     popup: T.Popup {
         id: comboBoxPopup
-        x: actionIndicator.width + myComboBox.borderWidth
+        x: actionIndicator.width + StudioTheme.Values.border
         y: myComboBox.height
-        width: myComboBox.width - actionIndicator.width - myComboBox.borderWidth * 2
+        width: myComboBox.width - actionIndicator.width - StudioTheme.Values.border * 2
         // TODO Setting the height on the popup solved the problem with the popup of height 0,
         // but it has the problem that it sometimes extend over the border of the actual window
         // and is then cut off.
@@ -213,7 +209,7 @@ T.ComboBox {
                          + comboBoxPopup.bottomPadding,
                          myComboBox.Window.height - topMargin - bottomMargin,
                          StudioTheme.Values.maxComboBoxPopupHeight)
-        padding: myComboBox.borderWidth
+        padding: StudioTheme.Values.border
         margins: 0 // If not defined margin will be -1
         closePolicy: T.Popup.CloseOnPressOutside | T.Popup.CloseOnPressOutsideParent
                      | T.Popup.CloseOnEscape | T.Popup.CloseOnReleaseOutside
@@ -245,7 +241,7 @@ T.ComboBox {
         State {
             name: "default"
             when: myComboBox.enabled && !myComboBox.hover && !myComboBox.edit && !myComboBox.open
-                  && !myComboBox.activeFocus
+                  && !myComboBox.activeFocus && !myComboBox.hasActiveDrag
             PropertyChanges {
                 target: myComboBox
                 wheelEnabled: false
@@ -257,9 +253,23 @@ T.ComboBox {
             PropertyChanges {
                 target: comboBoxBackground
                 color: StudioTheme.Values.themeControlBackground
-                border.color: myComboBox.hasActiveDrag ? StudioTheme.Values.themeInteraction
-                                                       : StudioTheme.Values.themeControlOutline
-                border.width: myComboBox.borderWidth
+            }
+        },
+        State {
+            name: "acceptsDrag"
+            when: myComboBox.enabled && myComboBox.hasActiveDrag && !myComboBox.hasActiveHoverDrag
+            PropertyChanges {
+                target: comboBoxBackground
+                border.color: StudioTheme.Values.themeControlOutlineInteraction
+            }
+        },
+        State {
+            name: "dragHover"
+            when: myComboBox.enabled && myComboBox.hasActiveHoverDrag
+            PropertyChanges {
+                target: comboBoxBackground
+                color: StudioTheme.Values.themeControlBackgroundInteraction
+                border.color: StudioTheme.Values.themeControlOutlineInteraction
             }
         },
         // This state is intended for ComboBoxes which aren't editable, but have focus e.g. via
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBoxInput.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBoxInput.qml
index c6b91dc1ad..e259687698 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBoxInput.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBoxInput.qml
@@ -34,7 +34,6 @@ TextInput {
 
     property bool edit: textInput.activeFocus
     property bool hover: mouseArea.containsMouse && textInput.enabled
-    property int borderWidth: StudioTheme.Values.border
 
     z: 2
     font: myControl.font
@@ -56,11 +55,11 @@ TextInput {
 
     Rectangle {
         id: textInputBackground
-        x: textInput.borderWidth
-        y: textInput.borderWidth
+        x: StudioTheme.Values.border
+        y: StudioTheme.Values.border
         z: -1
         width: textInput.width
-        height: StudioTheme.Values.height - textInput.borderWidth * 2
+        height: StudioTheme.Values.height - StudioTheme.Values.border * 2
         color: StudioTheme.Values.themeControlBackground
         border.width: 0
     }
@@ -94,7 +93,7 @@ TextInput {
         State {
             name: "default"
             when: myControl.enabled && !textInput.edit && !textInput.hover && !myControl.hover
-                  && !myControl.open
+                  && !myControl.open && !myControl.hasActiveDrag
             PropertyChanges {
                 target: textInputBackground
                 color: StudioTheme.Values.themeControlBackground
@@ -106,6 +105,14 @@ TextInput {
             }
         },
         State {
+            name: "dragHover"
+            when: myControl.enabled && myControl.hasActiveHoverDrag
+            PropertyChanges {
+                target: textInputBackground
+                color: StudioTheme.Values.themeControlBackgroundInteraction
+            }
+        },
+        State {
             name: "globalHover"
             when: myControl.hover && !textInput.hover && !textInput.edit && !myControl.open
             PropertyChanges {
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/FilterComboBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/FilterComboBox.qml
index 30142652ab..c41fe060e5 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/FilterComboBox.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/FilterComboBox.qml
@@ -87,6 +87,9 @@ Item {
     property alias popupScrollBar: popupScrollBar
     property alias popupMouseArea: popupMouseArea
 
+    property bool hasActiveDrag: false // an item that can be dropped here is being dragged
+    property bool hasActiveHoverDrag: false // an item that can be dropped her is being hovered on top
+
     width: StudioTheme.Values.defaultControlWidth
     height: StudioTheme.Values.defaultControlHeight
     implicitHeight: StudioTheme.Values.defaultControlHeight
@@ -468,9 +471,11 @@ Item {
                 State {
                     name: "default"
                     when: root.enabled && !textInput.edit && !root.hover && !root.open
+                          && !root.hasActiveDrag
                     PropertyChanges {
                         target: textInputBackground
                         color: StudioTheme.Values.themeControlBackground
+                        border.color: StudioTheme.Values.themeControlOutline
                     }
                     PropertyChanges {
                         target: textInputMouseArea
@@ -479,6 +484,23 @@ Item {
                     }
                 },
                 State {
+                    name: "acceptsDrag"
+                    when: root.enabled && root.hasActiveDrag && !root.hasActiveHoverDrag
+                    PropertyChanges {
+                        target: textInputBackground
+                        border.color: StudioTheme.Values.themeInteraction
+                    }
+                },
+                State {
+                    name: "dragHover"
+                    when: root.enabled && root.hasActiveHoverDrag
+                    PropertyChanges {
+                        target: textInputBackground
+                        color: StudioTheme.Values.themeControlBackgroundInteraction
+                        border.color: StudioTheme.Values.themeInteraction
+                    }
+                },
+                State {
                     name: "globalHover"
                     when: root.hover && !textInput.hover && !textInput.edit && !root.open
                     PropertyChanges {
@@ -585,13 +607,21 @@ Item {
                         name: "default"
                         when: root.enabled && checkIndicator.enabled && !root.edit
                               && !checkIndicator.hover && !root.hover
-                              && !checkIndicator.checked
+                              && !checkIndicator.checked && !root.hasActiveHoverDrag
                         PropertyChanges {
                             target: checkIndicator
                             color: StudioTheme.Values.themeControlBackground
                         }
                     },
                     State {
+                        name: "dragHover"
+                        when: root.enabled && root.hasActiveHoverDrag
+                        PropertyChanges {
+                            target: checkIndicator
+                            color: StudioTheme.Values.themeControlBackgroundInteraction
+                        }
+                    },
+                    State {
                         name: "globalHover"
                         when: root.enabled && checkIndicator.enabled
                               && !checkIndicator.hover && root.hover && !root.edit
diff --git a/src/plugins/qmldesigner/components/assetslibrary/assetslibraryiconprovider.cpp b/src/plugins/qmldesigner/components/assetslibrary/assetslibraryiconprovider.cpp
index 9d11d26400..943693f223 100644
--- a/src/plugins/qmldesigner/components/assetslibrary/assetslibraryiconprovider.cpp
+++ b/src/plugins/qmldesigner/components/assetslibrary/assetslibraryiconprovider.cpp
@@ -75,7 +75,7 @@ QPixmap AssetsLibraryIconProvider::requestPixmap(const QString &id, QSize *size,
         pixmap = Utils::StyleHelper::dpiSpecificImageFile(":/AssetsLibrary/images/assets_default.png");
 
     if (requestedSize.isValid())
-        return pixmap.scaled(requestedSize);
+        return pixmap.scaled(requestedSize, Qt::KeepAspectRatio);
 
     return pixmap;
 }
diff --git a/src/plugins/qmldesigner/components/assetslibrary/assetslibrarywidget.cpp b/src/plugins/qmldesigner/components/assetslibrary/assetslibrarywidget.cpp
index 7cf91158d6..632574fb0f 100644
--- a/src/plugins/qmldesigner/components/assetslibrary/assetslibrarywidget.cpp
+++ b/src/plugins/qmldesigner/components/assetslibrary/assetslibrarywidget.cpp
@@ -91,10 +91,6 @@ bool AssetsLibraryWidget::eventFilter(QObject *obj, QEvent *event)
                 m_assetsToDrag.clear();
             }
         }
-    } else if (event->type() == QMouseEvent::MouseButtonRelease) {
-        m_assetsToDrag.clear();
-        if (m_model)
-            m_model->endDrag();
     }
 
     return QObject::eventFilter(obj, event);
diff --git a/src/plugins/qmldesigner/components/itemlibrary/itemlibrarywidget.cpp b/src/plugins/qmldesigner/components/itemlibrary/itemlibrarywidget.cpp
index e6f2b2825e..109078e156 100644
--- a/src/plugins/qmldesigner/components/itemlibrary/itemlibrarywidget.cpp
+++ b/src/plugins/qmldesigner/components/itemlibrary/itemlibrarywidget.cpp
@@ -126,10 +126,6 @@ bool ItemLibraryWidget::eventFilter(QObject *obj, QEvent *event)
                 m_itemToDrag = {};
             }
         }
-    } else if (event->type() == QMouseEvent::MouseButtonRelease) {
-        m_itemToDrag = {};
-        if (model)
-            model->endDrag();
     }
 
     return QObject::eventFilter(obj, event);
diff --git a/src/plugins/qmldesigner/components/propertyeditor/propertyeditorcontextobject.cpp b/src/plugins/qmldesigner/components/propertyeditor/propertyeditorcontextobject.cpp
index 3a9a138b2a..8ba1325efa 100644
--- a/src/plugins/qmldesigner/components/propertyeditor/propertyeditorcontextobject.cpp
+++ b/src/plugins/qmldesigner/components/propertyeditor/propertyeditorcontextobject.cpp
@@ -322,6 +322,19 @@ void PropertyEditorContextObject::insertKeyframe(const QString &propertyName)
     });
 }
 
+QString PropertyEditorContextObject::activeDragSuffix() const
+{
+    return m_activeDragSuffix;
+}
+
+void PropertyEditorContextObject::setActiveDragSuffix(const QString &suffix)
+{
+    if (m_activeDragSuffix != suffix) {
+        m_activeDragSuffix = suffix;
+        emit activeDragSuffixChanged();
+    }
+}
+
 int PropertyEditorContextObject::majorVersion() const
 {
     return m_majorVersion;
diff --git a/src/plugins/qmldesigner/components/propertyeditor/propertyeditorcontextobject.h b/src/plugins/qmldesigner/components/propertyeditor/propertyeditorcontextobject.h
index 6a3e410c8a..f5a2224c8b 100644
--- a/src/plugins/qmldesigner/components/propertyeditor/propertyeditorcontextobject.h
+++ b/src/plugins/qmldesigner/components/propertyeditor/propertyeditorcontextobject.h
@@ -56,6 +56,8 @@ class PropertyEditorContextObject : public QObject
     Q_PROPERTY(int majorQtQuickVersion READ majorQtQuickVersion WRITE setMajorQtQuickVersion NOTIFY majorQtQuickVersionChanged)
     Q_PROPERTY(int minorQtQuickVersion READ minorQtQuickVersion WRITE setMinorQtQuickVersion NOTIFY minorQtQuickVersionChanged)
 
+    Q_PROPERTY(QString activeDragSuffix READ activeDragSuffix NOTIFY activeDragSuffixChanged)
+
     Q_PROPERTY(bool hasAliasExport READ hasAliasExport NOTIFY hasAliasExportChanged)
 
     Q_PROPERTY(bool hasActiveTimeline READ hasActiveTimeline NOTIFY hasActiveTimelineChanged)
@@ -102,6 +104,9 @@ public:
 
     Q_INVOKABLE bool isBlocked(const QString &propName) const;
 
+    QString activeDragSuffix() const;
+    void setActiveDragSuffix(const QString &suffix);
+
     int majorVersion() const;
     int majorQtQuickVersion() const;
     int minorQtQuickVersion() const;
@@ -134,6 +139,7 @@ signals:
     void specificQmlComponentChanged();
     void hasAliasExportChanged();
     void hasActiveTimelineChanged();
+    void activeDragSuffixChanged();
 
 public slots:
 
@@ -182,6 +188,8 @@ private:
     bool m_aliasExport = false;
 
     bool m_setHasActiveTimeline = false;
+
+    QString m_activeDragSuffix;
 };
 
 class EasingCurveEditor : public QObject
diff --git a/src/plugins/qmldesigner/components/propertyeditor/propertyeditorvalue.cpp b/src/plugins/qmldesigner/components/propertyeditor/propertyeditorvalue.cpp
index 1ef95365e1..867fd9bd65 100644
--- a/src/plugins/qmldesigner/components/propertyeditor/propertyeditorvalue.cpp
+++ b/src/plugins/qmldesigner/components/propertyeditor/propertyeditorvalue.cpp
@@ -537,6 +537,8 @@ void PropertyEditorValue::commitDrop(const QString &path)
         // assign the texture to the property
         setExpressionWithEmit(texture.id());
     }
+
+    m_modelNode.view()->model()->endDrag();
 }
 
 QStringList PropertyEditorValue::generateStringList(const QString &string) const
diff --git a/src/plugins/qmldesigner/components/propertyeditor/propertyeditorview.cpp b/src/plugins/qmldesigner/components/propertyeditor/propertyeditorview.cpp
index 586c4dec05..b516bba9c9 100644
--- a/src/plugins/qmldesigner/components/propertyeditor/propertyeditorview.cpp
+++ b/src/plugins/qmldesigner/components/propertyeditor/propertyeditorview.cpp
@@ -26,8 +26,8 @@
 #include "propertyeditorview.h"
 
 #include "propertyeditorqmlbackend.h"
-#include "propertyeditorvalue.h"
 #include "propertyeditortransaction.h"
+#include "propertyeditorvalue.h"
 
 #include <qmldesignerconstants.h>
 #include <qmltimeline.h>
@@ -850,7 +850,26 @@ void PropertyEditorView::nodeReparented(const ModelNode &node,
         m_qmlBackEndForCurrentType->backendAnchorBinding().setup(QmlItemNode(m_selectedNode));
 }
 
-void PropertyEditorView::setValue(const QmlObjectNode &qmlObjectNode, const PropertyName &name, const QVariant &value)
+void PropertyEditorView::dragStarted(QMimeData *mimeData)
+{
+    if (!mimeData->hasFormat(Constants::MIME_TYPE_ASSETS))
+        return;
+
+    const QString assetPath = QString::fromUtf8(mimeData->data(Constants::MIME_TYPE_ASSETS))
+                                  .split(',')[0];
+    const QString suffix = "*." + assetPath.split('.').last().toLower();
+
+    m_qmlBackEndForCurrentType->contextObject()->setActiveDragSuffix(suffix);
+}
+
+void PropertyEditorView::dragEnded()
+{
+    m_qmlBackEndForCurrentType->contextObject()->setActiveDragSuffix("");
+}
+
+void PropertyEditorView::setValue(const QmlObjectNode &qmlObjectNode,
+                                  const PropertyName &name,
+                                  const QVariant &value)
 {
     m_locked = true;
     m_qmlBackEndForCurrentType->setValue(qmlObjectNode, name, value);
@@ -869,6 +888,4 @@ void PropertyEditorView::reloadQml()
     resetView();
 }
 
-
-} //QmlDesigner
-
+} // namespace QmlDesigner
diff --git a/src/plugins/qmldesigner/components/propertyeditor/propertyeditorview.h b/src/plugins/qmldesigner/components/propertyeditor/propertyeditorview.h
index 3bbe502050..09d6dc7f41 100644
--- a/src/plugins/qmldesigner/components/propertyeditor/propertyeditorview.h
+++ b/src/plugins/qmldesigner/components/propertyeditor/propertyeditorview.h
@@ -87,6 +87,9 @@ public:
                         const NodeAbstractProperty &oldPropertyParent,
                         AbstractView::PropertyChangeFlags propertyChange) override;
 
+    void dragStarted(QMimeData *mimeData) override;
+    void dragEnded() override;
+
     void changeValue(const QString &name);
     void changeExpression(const QString &name);
     void exportPropertyAsAlias(const QString &name);
diff --git a/src/plugins/qmldesigner/designercore/model/model.cpp b/src/plugins/qmldesigner/designercore/model/model.cpp
index 4e38fb3cfb..47ce515f9e 100644
--- a/src/plugins/qmldesigner/designercore/model/model.cpp
+++ b/src/plugins/qmldesigner/designercore/model/model.cpp
@@ -1517,7 +1517,9 @@ void Model::startDrag(QMimeData *mimeData, const QPixmap &icon)
     auto drag = new QDrag(this);
     drag->setPixmap(icon);
     drag->setMimeData(mimeData);
-    drag->exec();
+    if (drag->exec() == Qt::IgnoreAction)
+        endDrag();
+
     drag->deleteLater();
 }