DataTransfer对象具有effectAllowed 和 dropEffect两个属性。 effectAllowed 和 dropEffect 最主要的作用是，用于配置拖拽 *** 作过程中鼠标指针的类型以便提示用户后续可执行怎样的 *** 作；其次的作用是，控制 drop 事件的触发与否。下面我们来看看effectAllowed 和 dropEffect两个属性的介绍，看看他们是如何控制鼠标指针样式的
effectAllowed：
1.属性作用：用于设置被拖拽元素可执行的 *** 作。
2.取值范围：
copy ，限定dropEffect的属性值为copy，否则会鼠标指针为禁止样式
link ，限定dropEffect的属性值为link，否则会鼠标指针为禁止样式
move ，限定dropEffect的属性值为move，否则会鼠标指针为禁止样式
copyLink ，限定dropEffect的属性值为copy和link，否则会鼠标指针为禁止样式
copyMove ，限定dropEffect的属性值为copy和move，否则会鼠标指针为禁止样式
linkMove ，限定dropEffect的属性值为link和move，否则会鼠标指针为禁止样式
all ，允许dropEffect的属性值为任意值
none ，鼠标指针一直为禁止样式，不管dropEffect的属性值是什么
uninitialized ，没有限定dropEffect属性的值，效果和 all 一样。
3.注意：仅能在 dragstart 事件中设置该属性，其他事件中设置均无效。
dropEffect属性
1.属性作用：
用于设置目标元素将执行的 *** 作，若属性值属于 effectAllowed 范围内，则鼠标指针将显示对应的指针样式，否则则显示禁止的指针样式。
2.取值范围：
copy ：被拖拽元素将被复制到目标元素内，若属于 effectAllowed 范围内时，则鼠标指针显示复制的样式，否则则显示禁止的指针样式。
link ：被拖拽元素将以超链接的形式打开资源，若属于 effectAllowed 范围内时，则鼠标指针显示超链接的样式，否则则显示禁止的指针样式。
move ：被拖拽元素将被移动到目标元素内，若属于 effectAllowed 范围内时，则鼠标指针显示移动的样式，否则则显示禁止的指针样式。
none ：被拖拽元素不能在目标元素上作任何 *** 作，一直显示禁止的指针样式。除了文本框外其他元素的默认值均为none
3.注意：
1）仅能在 dragover 事件中设置该属性值，其他事件中设置均无效
2）当显示禁止的指针样式时，将无法触发目标元素的 drop 事件。
通过将effectAllowed 和 dropEffect两个属性进行匹配我们就可以很简单的根据拖拽行为即将要发生的事情，来设置对应的鼠标样式了。这些是HTML5的新特性，如果你想了解更有相关的知识，你可以去一个叫做秒秒学的网站查找相关资料。
拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从 *** 作系统拖拽文件实现文件选择,拖拽实现元素布局的修改.
一个完整的drag and drop流程通常包含以下几个步骤:
1.设置可拖拽目标.设置属性draggable="true"实现元素的可拖拽.
2.监听dragstart设置拖拽数据
3.为拖拽 *** 作设置反馈图标(可选)
4.设置允许的拖放效果,如copy,move,link
5.设置拖放目标,默认情况下浏览器阻止所有的拖放 *** 作,所以需要监听dragenter或者dragover取消浏览器默认行为使元素可拖
6.监听drop事件执行所需 *** 作
以下是拖拽产生的一系列事件,拖拽事件产生时不会产生对应的鼠标事件.
1.dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从 *** 作系统拖拽文件到浏览器时不触发此事件.
2.dragenter:拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮
3.dragover:拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.
4.dragleave:拖拽时鼠标移出目标元素时在目标元素上触发.此时监听器可以取消掉前面设置的视觉效果.
5.drag:拖拽期间在被拖拽元素上连续触发
6.drop:鼠标在拖放目标上释放时,在拖放目标上触发.此时监听器需要收集数据并且执行所需 *** 作.如果是从 *** 作系统拖放文件到浏览器,需要取消浏览器默认行为.
7.dragend:鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到 *** 作系统时不会触发此事件.
拖拽事件周期中会初始化一个DataTransfer对象,用于保存拖拽数据和交互信息.以下是它的属性和方法.
1.dropEffect: 拖拽交互类型,通常决定浏览器如何显示鼠标光标并控制拖放 *** 作.常见的取值有copy,move,link和none
2.effectAllowed: 指定允许的交互类型,可以取值:copy,move,link,copyLink,copyMove,limkMove, all, none默认为uninitialized(允许所有 *** 作)
3.files: 包含File对象的FileList对象.从 *** 作系统向浏览器拖放文件时有用.
4.types: 保存DataTransfer对象中设置的所有数据类型.
5.setData(format, data): 以键值对设置数据,format通常为数据格式,如text,text/html
6.getData(format): 获取设置的对应格式数据,format与setData()中一致
7.clearData(format): 清除指定格式的数据
8.setDragImage(imgElement, x, y): 设置自定义图标
dataTransfer对象在传递给监听器的事件对象中可以访问,如下:
在页面中选择文本并拖拽,无需处理dragstart设置数据,浏览器自动设置选取的文本.相当于 event.dataTransfer.setData("text/plain", "this is text to drag") .只需要在拖放目标上读取对应格式的数据即可.
前面介绍了最基本的理论知识,下面进行实际 *** 作
目标: 拖拽元素到达目的区域,改变在DOM中的位置,同时设置反馈视觉效果
从 *** 作系统拖拽文件到浏览器中.不会触发dragstart,dragend,只需取消拖放区域的默认行为,设置反馈,并在拖放发生时取消浏览器默认行为,通过e.dataTransfer.files获取文件信息进行 *** 作.
1. 首先，需要设置自己的控件是支持拖放 *** 作的，按照如下设置即可：setDragEnabled(true) //允许拖拽
setAcceptDrops(true) //允许放置
登录后复制
2. 其次，我这个拖放 *** 作是基于QTreeView来完成的，因此继承这个QTeeView之后还需要实现startDrag()这个函数。它可以被理解成是拖放 *** 作的入口函数。
//开始拖拽事件
virtual void stratDrag(Qt::DropActions supportedAxtions)
//这个函数可以理解为拖放 *** 作的入口函数。当拖放开始进行时，就会发现断点会进到这里。
void CMyTree::stratDrag(Qt::DropActions supportedAxtions)
{
QDrag* pDrag = new QDrag(this)
QMimeData* pMimeData = new QMimeData
QModelIndex index = currentIndex()
if (pDrag &&pMimeData)
{
pDrag->setMimeData(pMimeData)
pDrag->exec(Qt::MoveAction)
}
}
登录后复制
3. 接下来，拖放 *** 作肯定是离不开鼠标的按压与移动的。因此还需要实现以下几个虚函数。
//鼠标点击事件
virtual void mousePressEvent(QMouseEvent *event)
//拖拽进入事件
virtual void dragEnterEvent(QDragEnterEvent* event)
//拖拽移动事件
virtual void dragMoveEvent(QDragMoveEvent* event)
//拖放事件
virtual void dropEvent(QDropEvent *event)
//鼠标松开事件
virtual void mouseReleaseEvent(QMouseEvent *event)
//鼠标移动事件
virtual void mouseMoveEvent(QMouseEvent *event)
//鼠标悬停事件
virtual bool viewportEvent(QEvent *event)
登录后复制
当一切准备工作完成后，再通过QTreeView与QStandardItemModel相结合，完成一些列的拖放 *** 作。本例大致需求是：将叶子节点拖放到不同组织下。整个源码如下：
//CMyTree.h
#pragma once
#include <QTreeView>
#include <QStandardItem>
class CMyTree :
public QTreeView
{
public:
CMyTree(QWidget* parent = nullptr)
protected:
//开始拖拽事件
virtual void stratDrag(Qt::DropActions supportedAxtions)
//鼠标点击事件
virtual void mousePressEvent(QMouseEvent *event)
//拖拽进入事件
virtual void dragEnterEvent(QDragEnterEvent* event)
//拖拽移动事件
virtual void dragMoveEvent(QDragMoveEvent* event)
//拖放事件
virtual void dropEvent(QDropEvent *event)
//鼠标松开事件
virtual void mouseReleaseEvent(QMouseEvent *event)
//鼠标移动事件
virtual void mouseMoveEvent(QMouseEvent *event)
//鼠标悬停事件
virtual bool viewportEvent(QEvent *event)
private:
QStandardItem* m_pDragItem
QStandardItem* m_pDropItem
}
登录后复制
//CMyTree.cpp
#include "CMyTree.h"
#include <QDrag>
#include <QMimeData>
#include <QStandardItemModel>
#include <QMouseEvent>
CMyTree::CMyTree(QWidget* parent /* = nullptr */)
: QTreeView(parent)
, m_pDragItem(nullptr)
, m_pDropItem(nullptr)
{
setDropIndicatorShown(true)
setHeaderHidden(true) //隐藏表头
setDragEnabled(true) //允许拖拽
setAcceptDrops(true) //允许放置
}
void CMyTree::stratDrag(Qt::DropActions supportedAxtions)
{
QDrag* pDrag = new QDrag(this)
QMimeData* pMimeData = new QMimeData
QModelIndex index = currentIndex()
if (pDrag &&pMimeData)
{
pDrag->setMimeData(pMimeData)
pDrag->exec(Qt::MoveAction)
}
}
void CMyTree::mousePressEvent(QMouseEvent *event)
{
if (Qt::RightButton == event->button())
{
setDragEnabled(false)
}
else if (Qt::LeftButton == event->button())
{
setDragEnabled(true)
}
QTreeView::mousePressEvent(event)
}
void CMyTree::dragEnterEvent(QDragEnterEvent* event)
{
if (event->mimeData())
{
QStandardItemModel* pModel = (QStandardItemModel*)(this->model())
QPoint mousePos = event->pos()
QModelIndex localIndex = indexAt(mousePos)
m_pDragItem = pModel->itemFromIndex(localIndex)
QString strData = localIndex.data(Qt::DisplayRole).toString()
QRect rect = visualRect(localIndex)
event->accept()
}
}
void CMyTree::dragMoveEvent(QDragMoveEvent* event)
{
if (event->mimeData())
{
update()
event->accept()
}
}
void CMyTree::dropEvent(QDropEvent *event)
{
QStandardItemModel* pModel = (QStandardItemModel*)(this->model())
QPoint mousePos = event->pos()
QModelIndex localIndex = indexAt(mousePos)
m_pDropItem = pModel->itemFromIndex(localIndex)
QString strData = localIndex.data(Qt::DisplayRole).toString()
QRect rect = visualRect(localIndex)
//同组织下释放没效果
QStandardItem* pDragItemParent = m_pDragItem->parent()
QStandardItem* pDropItemParent = m_pDropItem->parent()
if (pDragItemParent == pDropItemParent)
{
return
}
else if (pDragItemParent &&pDropItemParent)
{
QStandardItem* pItem = new QStandardItem(m_pDragItem->data(Qt::DisplayRole).toString())
pDropItemParent->appendRow(pItem)
}
update()
}
void CMyTree::mouseReleaseEvent(QMouseEvent *event)
{
QTreeView::mouseReleaseEvent(event)
}
void CMyTree::mouseMoveEvent(QMouseEvent *event)
{
QTreeView::mouseMoveEvent(event)
}
bool CMyTree::viewportEvent(QEvent *event)
{
return QTreeView::viewportEvent(event)
}
登录后复制
//CMyApp.h
#pragma once
#include <QtWidgets/QWidget>
#include <QStandardItemModel>
#include "ui_CMyApp.h"
class CMyApp : public QWidget
{
Q_OBJECT
public:
CMyApp(QWidget *parent = Q_NULLPTR)
void InitUI()
private:
Ui::CMyAppClass ui
QStandardItemModel* m_pModel
}
登录后复制
//CMyApp.cpp
#include "CMyApp.h"
#include <QStandardItem>
CMyApp::CMyApp(QWidget *parent)
: QWidget(parent)
{
ui.setupUi(this)
m_pModel = new QStandardItemModel(ui.treeView)
InitUI()
}
void CMyApp::InitUI()
{
QStandardItem* pItem1 = new QStandardItem(QStringLiteral("法师"))
m_pModel->appendRow(pItem1)
QStandardItem* pItem1_1 = new QStandardItem(QStringLiteral("妲己"))
QStandardItem* pItem1_2 = new QStandardItem(QStringLiteral("小乔"))
QStandardItem* pItem1_3 = new QStandardItem(QStringLiteral("西施"))
pItem1->appendRow(pItem1_1)
pItem1->appendRow(pItem1_2)
pItem1->appendRow(pItem1_3)
QStandardItem* pItem2 = new QStandardItem(QStringLiteral("法刺"))
m_pModel->appendRow(pItem2)
QStandardItem* pItem2_1 = new QStandardItem(QStringLiteral("不知火舞"))
QStandardItem* pItem2_2 = new QStandardItem(QStringLiteral("貂蝉"))
QStandardItem* pItem2_3 = new QStandardItem(QStringLiteral("上官婉儿"))
pItem2->appendRow(pItem2_1)
pItem2->appendRow(pItem2_2)
pItem2->appendRow(pItem2_3)
ui.treeView->setModel(m_pModel)
}
登录后复制
//main.cpp
#include "CMyApp.h"
#include <QtWidgets/QApplication>
int main(int argc, char *argv[])
{
QApplication a(argc, argv)
CMyApp w
w.show()
return a.exec()
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）