Tutoriel PyQt5 "Drag & Drop"

 

Annuaire

 

Glisser-déposer dans PyQt5

QDrag

Glisser-déposer simple

Widget de bouton glisser-déposer

---

Glisser-déposer dans PyQt5

Dans cette partie du didacticiel PyQt5, nous discuterons des opérations de glisser-déposer.

Dans une interface utilisateur graphique d'ordinateur, le glisser-déposer consiste à cliquer sur un objet virtuel et à le faire glisser vers un autre emplacement ou un autre objet virtuel (ou de soutenir son fonctionnement). En général, il peut être utilisé pour appeler plusieurs opérations ou créer différents types d'associations entre deux objets abstraits.

Le glisser-déposer fait partie de l'interface utilisateur graphique. Les opérations de glisser-déposer permettent aux utilisateurs d'effectuer intuitivement des opérations complexes.

Habituellement, nous pouvons glisser-déposer deux choses: des données ou des objets graphiques. Si nous glissons des images d'une application à une autre, nous glissons et déposons des données binaires. Si nous faisons glisser une étiquette dans Firefox et la déplaçons vers un autre endroit, nous glisserons et déposerons un composant graphique.

QDrag

QDragPrend en charge la transmission de données par glisser-déposer basée sur MIME. Il gère la plupart des détails des opérations de glisser-déposer. Les données transférées sont contenues dans l' QMimeDataobjet.

Glisser-déposer simple

Dans le premier exemple, nous en avons un QLineEditet un  QPushButton. Nous faisons glisser le texte brut du widget d'édition de ligne et le déposons sur le widget de bouton. L'étiquette du bouton changera.

#!/usr/bin/python3
# -*- coding: utf-8 -*-

from PyQt5.QtWidgets import (QPushButton, QWidget, 
    QLineEdit, QApplication)
import sys

class Button(QPushButton):
  
    def __init__(self, title, parent):
        super().__init__(title, parent)
        
        self.setAcceptDrops(True)
        

    def dragEnterEvent(self, e):
      
        if e.mimeData().hasFormat('text/plain'):
            e.accept()
        else:
            e.ignore() 

    def dropEvent(self, e):
        
        self.setText(e.mimeData().text()) 


class Example(QWidget):
  
    def __init__(self):
        super().__init__()
        
        self.initUI()
        
        
    def initUI(self):

        edit = QLineEdit('', self)
        edit.setDragEnabled(True)
        edit.move(30, 65)

        button = Button("Button", self)
        button.move(190, 65)
        
        self.setWindowTitle('Simple drag and drop')
        self.setGeometry(300, 300, 300, 150)


if __name__ == '__main__':
  
    app = QApplication(sys.argv)
    ex = Example()
    ex.show()
    app.exec_()  

Cet exemple fournit une opération de glisser-déposer simple.

class Button（QPushButton）：
  
    def __init __（self，title，parent）：
        super（）.__ init __（title，parent）
        
        ...

Afin de supprimer QPushButtonle texte du widget, nous devons réimplémenter certaines méthodes. Par conséquent, nous créons notre propre Button classe, qui héritera de la QPushButtonclasse.

self.setAcceptDrops(True)

Nous avons activé les événements de dépôt pour les widgets setAcceptDrops().

def dragEnterEvent(self, e):
    
    if e.mimeData().hasFormat('text/plain'):
        e.accept()
    else:
        e.ignore() 

Tout d'abord, nous réimplémentons la dragEnterEvent()méthode. Nous nous informons du type de données que nous acceptons. Dans notre exemple, c'est du texte brut.

def dropEvent(self, e):

    self.setText(e.mimeData().text()) 

En réimplémentant cette dropEvent()méthode, nous définissons ce qui arrive à l'événement drop. Ici, nous modifions le texte du widget bouton.

edit = QLineEdit('', self)
edit.setDragEnabled(True)

Le QLineEditwidget a un support intégré pour les opérations de glissement. Tout ce que nous devons faire est d'appeler la setDragEnabled()méthode pour l'activer.

Figure: Glisser-déposer simple

Widget de bouton glisser-déposer

Dans l'exemple ci-dessous, nous allons montrer comment faire glisser et déposer un widget bouton.

#!/usr/bin/python3
# -*- coding: utf-8 -*-

from PyQt5.QtWidgets import QPushButton, QWidget, QApplication
from PyQt5.QtCore import Qt, QMimeData
from PyQt5.QtGui import QDrag
import sys

class Button(QPushButton):
  
    def __init__(self, title, parent):
        super().__init__(title, parent)
        

    def mouseMoveEvent(self, e):

        if e.buttons() != Qt.RightButton:
            return

        mimeData = QMimeData()

        drag = QDrag(self)
        drag.setMimeData(mimeData)
        drag.setHotSpot(e.pos() - self.rect().topLeft())

        dropAction = drag.exec_(Qt.MoveAction)


    def mousePressEvent(self, e):
      
        super().mousePressEvent(e)
        
        if e.button() == Qt.LeftButton:
            print('press')


class Example(QWidget):
  
    def __init__(self):
        super().__init__()

        self.initUI()
        
        
    def initUI(self):

        self.setAcceptDrops(True)

        self.button = Button('Button', self)
        self.button.move(100, 65)

        self.setWindowTitle('Click or Move')
        self.setGeometry(300, 300, 280, 150)
        

    def dragEnterEvent(self, e):
      
        e.accept()
        

    def dropEvent(self, e):

        position = e.pos()
        self.button.move(position)

        e.setDropAction(Qt.MoveAction)
        e.accept()
        

if __name__ == '__main__':
  
    app = QApplication(sys.argv)
    ex = Example()
    ex.show()
    app.exec_() 

Dans notre exemple de code, nous en QPushButtonavons un dans la fenêtre. Si nous cliquons sur le bouton avec le bouton gauche de la souris, un message "appuyez" sera imprimé sur la console. En cliquant avec le bouton droit et en déplaçant le bouton, nous effectuons une opération de glisser-déposer sur le widget du bouton.

class Button(QPushButton):
  
    def __init__(self, title, parent):
        super().__init__(title, parent)

Nous avons créé une Buttonclasse dérivée QPushButton. Nous avons également réimplémenté deux méthodes QPushButton: mouseMoveEvent()et mousePressEvent(). Cette mouseMoveEvent()méthode est l'endroit où l'opération de glisser-déposer commence.

if e.buttons() != Qt.RightButton:
    return

Ici, nous avons décidé d'utiliser uniquement le bouton droit de la souris pour effectuer des opérations de glisser-déposer. Le bouton gauche de la souris est réservé aux boutons de clic.

mimeData = QMimeData()

drag = QDrag(self)
drag.setMimeData(mimeData)
drag.setHotSpot(e.pos() - self.rect().topLeft())

L' QDragobjet a été créé. Cette classe prend en charge la transmission de données par glisser-déposer basée sur MIME.

dropAction = drag.exec_（Qt.MoveAction）

exec_()Faites glisser l'objet pour démarrer l'opération de glisser-déposer.

def mousePressEvent(self, e):
    
    super().mousePressEvent(e)
    
    if e.button() == Qt.LeftButton:
        print('press')

Si nous cliquons sur le bouton avec le bouton gauche de la souris, nous imprimons "appuyez" sur la console. Notez que nous mousePressEvent()appelons également des méthodes sur le parent. Sinon, nous ne verrons pas le bouton enfoncé.

position = e.pos()
self.button.move(position)

Dans cette dropEvent()méthode, nous spécifions ce qui se passe lorsque le bouton de la souris est relâché et que l'opération de placement est terminée. Dans notre exemple, nous trouvons la position actuelle du pointeur de la souris et déplaçons le bouton en conséquence.

e.setDropAction(Qt.MoveAction)
e.accept()

Nous utilisons le type d'opération de placement spécifié setDropAction(). Dans notre exemple, il s'agit d'une action de déplacement.