drag and drop
In GUI, drag and drop refers to the action that the user clicks on a virtual object, drags it, and then drops it on top of another object. In general, many actions and methods need to be called and many variables created.
Drag and drop allows users to operate complex logic intuitively.
In general, we can drag and drop two things: data and graphical interface. The essence of dragging and dropping an image from one application to another is manipulating binary data. The essence of dragging and dropping a table from Firefox to another location is to operate a graphics group.
simple drag and drop
This example uses QLineEditand QPushButton. Drag a text from the edit box onto the button to update the label (text) on the button.
#!/usr/bin/python3
# -*- coding: utf-8 -*-
"""
ZetCode PyQt5 tutorial
This is a simple drag and
drop example.
Author: Jan Bodnar
Website: zetcode.com
Last edited: August 2017
"""
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_()
class Button(QPushButton):
def __init__(self, title, parent):
super().__init__(title, parent)
self.setAcceptDrops(True)
In order to accomplish the intended goal, we have to refactor some methods. First QPushButtonuse to construct a button instance.
self.setAcceptDrops(True)
Activate the drag event of the component.
def dragEnterEvent(self, e):
if e.mimeData().hasFormat('text/plain'):
e.accept()
else:
e.ignore()
First, we refactored dragEnterEvent()the method. Set the data type (plain text) that accepts drag and drop.
def dropEvent(self, e):
self.setText(e.mimeData().text())
Then refactor dropEvent()the method to change the default behavior of the button accepting the mouse release event.
edit = QLineEdit('', self)
edit.setDragEnabled(True)
QLineEditDrag and drop operations are supported by default, so we just need to call setDragEnabled()the method to use it.
Program display:
Drag and drop button component
This example shows how to drag and drop a button component.
#!/usr/bin/python3
# -*- coding: utf-8 -*-
"""
ZetCode PyQt5 tutorial
In this program, we can press on a button with a left mouse
click or drag and drop the button with the right mouse click.
Author: Jan Bodnar
Website: zetcode.com
Last edited: August 2017
"""
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_()
In the example above, there is a QPushButtoncomponent on the window. Left click on the button and the console will output press. Right click to click and drag the button.
class Button(QPushButton):
def __init__(self, title, parent):
super().__init__(title, parent)
From QPushButtoninheriting a Buttonclass, and then refactoring QPushButtontwo methods: mouseMoveEvent()and mousePressEvent(). mouseMoveEvent()is the event of the drag start.
if e.buttons() != Qt.RightButton:
return
We only hijack the right button event of the button, and the operation of the left button is still the default behavior.
mimeData = QMimeData()
drag = QDrag(self)
drag.setMimeData(mimeData)
drag.setHotSpot(e.pos() - self.rect().topLeft())
Create an QDragobject for transmitting MIME-based data.
dropAction = drag.exec_(Qt.MoveAction)
The handler function used when the drag and drop event starts start().
def mousePressEvent(self, e):
QPushButton.mousePressEvent(self, e)
if e.button() == Qt.LeftButton:
print('press')
Left-clicking the button will output "press" to the console. Note that we also call mousePressEvent()the method on the parent, otherwise we wouldn't see the button press.
position = e.pos()
self.button.move(position)
In dropEvent()the method, we define the behavior of the button after it is pressed and released, get the position of the mouse movement, and then place the button at this place.
e.setDropAction(Qt.MoveAction)
e.accept()
Specify the action type of drop as moveAction.