Duilib的控件拖拽排序，支持跨容器拖拽（网易云信版本）
完整代码见：https://github.com/netease-im/NIM_Duilib_Framework/pull/151
核心代码（思路）：
appitem.h
#pragma once #define APP_HEIGHT 90 #define APP_WIDTH 90 #define EACH_LINE 6 #include <string> //app的具体信息，这里假定有id，name，_icon,_isFrequent自行拓展 struct AppItem { std::string _id; std::wstring _name; std::wstring _icon; bool _isFrequent=false; }; //App UI类 class AppItemUi : public ui::VBox { public: static AppItemUi* Create(const AppItem& item); virtual void DoInit(); void SetAppdata(const AppItem& item,bool refresh); void FixPos(int step,int index=-1); //前进/后退多少步 目前应该有-1 0 1 inline int getIndex() const { return index_; } inline const AppItem& getAppData() const { return app_data_; } private: AppItem app_data_; int index_ = 0; //第几个 ui::Control* app_icon_ = nullptr; ui::Label* app_name_ = nullptr; }; //AppWindow 拖动显示窗口类 //最好半透明 class AppWindow : public ui::WindowImplBase { public: AppWindow(); ~AppWindow(); static AppWindow* CreateAppWindow(HWND hParent, POINT pt, const AppItem& Item) { AppWindow* ret = new AppWindow; ret->SetBeforeCreate(Item, pt); ret->Create(hParent, L"", WS_POPUP, WS_EX_TOOLWINDOW); pThis_ = ret; //需要改变下pos,延后到initWindows return ret; } /** * 一下三个接口是必须要覆写的接口，父类会调用这三个接口来构建窗口 * GetSkinFolder 接口设置你要绘制的窗口皮肤资源路径 * GetSkinFile 接口设置你要绘制的窗口的 xml 描述文件 * GetWindowClassName 接口设置窗口唯一的类名称 */ virtual std::wstring GetSkinFolder() override; virtual std::wstring GetSkinFile() override; virtual std::wstring GetWindowClassName() const override; /** * 收到 WM_CREATE 消息时该函数会被调用，通常做一些控件初始化的操作 */ virtual void InitWindow() override; /** * 收到 WM_CLOSE 消息时该函数会被调用 */ virtual LRESULT OnClose(UINT uMsg, WPARAM wParam, LPARAM lParam, BOOL& bHandled); //其他的功能函数 void SetBeforeCreate(const AppItem& Item, POINT pt){ item_ = Item; pt_ = pt; } void AdjustPos(); void InstallHook(); void UnInstallHook(); static LRESULT CALLBACK LowLevelMouseProc(int nCode, WPARAM wParam, LPARAM lParam); private: AppItem item_; ui::Box* origin_owner = nullptr; // POINT pt_; static HHOOK mouse_Hook_ ; static AppWindow* pThis_; };
appitem.cpp
#include "stdafx.h" #include "appitem.h" AppItemUi* AppItemUi::Create(const AppItem& item) { AppItemUi* uiItem = new AppItemUi; uiItem->SetAppdata(item, false); ui::GlobalManager::FillBoxWithCache(uiItem, L"movecontrol/app_item.xml"); return uiItem; } void AppItemUi::DoInit() { app_icon_ = static_cast<ui::Control*>(FindSubControl(L"app_icon")); if (app_icon_) { app_icon_->SetBkImage(app_data_._icon); } app_name_ = static_cast<ui::Label*>(FindSubControl(L"app_name")); if (app_name_) { app_name_->SetText(app_data_._name); } //绑定事件 } void AppItemUi::SetAppdata(const AppItem& item,bool refresh) { app_data_ = item; if (refresh) { if (app_icon_) { app_icon_->SetBkImage(app_data_._icon); } if (app_name_) { app_name_->SetText(app_data_._name); } } } void AppItemUi::FixPos(int step, int index) { if (index != -1) { index_ = index; } index_ += step; ui::UiRect marginRect = { (index_ % EACH_LINE)*APP_WIDTH, (index_ / EACH_LINE)*APP_HEIGHT,0,0 }; SetMargin(marginRect); } AppWindow::AppWindow() { } AppWindow::~AppWindow() { } std::wstring AppWindow::GetSkinFolder() { return L"movecontrol"; } std::wstring AppWindow::GetSkinFile() { return L"app_window.xml"; } std::wstring AppWindow::GetWindowClassName() const { return L"movecontrol"; } void AppWindow::InitWindow() { ui::VBox* root = static_cast<ui::VBox*>(FindControl(L"root")); if (root) { auto app_item = AppItemUi::Create(item_); root->Add(app_item); } //设置消息钩子，不然无法即时移动 InstallHook(); //移动到合适的位置 AdjustPos(); } LRESULT AppWindow::OnClose(UINT uMsg, WPARAM wParam, LPARAM lParam, BOOL& bHandled) { //清理hook UnInstallHook(); pThis_ = nullptr; return 0; } HHOOK AppWindow::mouse_Hook_; AppWindow* AppWindow::pThis_; void AppWindow::AdjustPos() { //移动到合适位置，并接管鼠标 //移植pos的位置,注意去掉阴影 // ui::UiRect rcCorner = GetShadowCorner(); POINT ptCursor; ::GetCursorPos(&ptCursor); //左上角的位置 ptCursor.x -= pt_.x; ptCursor.y -= pt_.y; ::SetWindowPos(GetHWND(), NULL, ptCursor.x - rcCorner.left, ptCursor.y - rcCorner.top, -1, -1, SWP_NOSIZE | SWP_NOZORDER | SWP_SHOWWINDOW); } void AppWindow::InstallHook() { if (mouse_Hook_) UnInstallHook(); mouse_Hook_ = SetWindowsHookEx(WH_MOUSE_LL, (HOOKPROC)AppWindow::LowLevelMouseProc, GetModuleHandle(NULL), NULL); } void AppWindow::UnInstallHook() { if (mouse_Hook_) { UnhookWindowsHookEx(mouse_Hook_); mouse_Hook_ = NULL; //set NULL } } LRESULT CALLBACK AppWindow::LowLevelMouseProc(int nCode, WPARAM wParam, LPARAM lParam) { if (nCode == HC_ACTION) { if (wParam == WM_MOUSEMOVE &&::GetKeyState(VK_LBUTTON) < 0) { MOUSEHOOKSTRUCT *pMouseStruct = (MOUSEHOOKSTRUCT *)lParam; if (NULL != pMouseStruct) { if (pThis_) { pThis_->AdjustPos(); } } } else if (wParam == WM_LBUTTONUP) { //鼠标弹起，无论什么时候都需要销毁窗口 if (pThis_) { //通知主窗口事件 ::PostMessage(GetParent(pThis_->GetHWND()), WM_LBUTTONUP, 0, 0); pThis_->Close(); } } } return CallNextHookEx(mouse_Hook_, nCode, wParam, lParam); }
layouts_form.h
#pragma once #include "AppDb.h" enum ThreadId { kThreadUI }; class LayoutsForm : public ui::WindowImplBase { public: LayoutsForm(const std::wstring& class_name, const std::wstring& theme_directory, const std::wstring& layout_xml); ~LayoutsForm(); /** * 一下三个接口是必须要覆写的接口，父类会调用这三个接口来构建窗口 * GetSkinFolder 接口设置你要绘制的窗口皮肤资源路径 * GetSkinFile 接口设置你要绘制的窗口的 xml 描述文件 * GetWindowClassName 接口设置窗口唯一的类名称 */ virtual std::wstring GetSkinFolder() override; virtual std::wstring GetSkinFile() override; virtual std::wstring GetWindowClassName() const override; /** * 收到 WM_CREATE 消息时该函数会被调用，通常做一些控件初始化的操作 */ virtual void InitWindow() override; /** * 收到 WM_CLOSE 消息时该函数会被调用 */ virtual LRESULT OnClose(UINT uMsg, WPARAM wParam, LPARAM lParam, BOOL& bHandled); /** * @brief 接收到鼠标左键弹起消息时被调用 * @param[in] uMsg 消息内容 * @param[in] wParam 消息附加参数 * @param[in] lParam 消息附加参数 * @param[out] bHandled 返回 true 则继续派发该消息，否则不再派发该消息 * @return 返回消息处理结果 */ virtual LRESULT OnLButtonUp(UINT uMsg, WPARAM wParam, LPARAM lParam, BOOL& bHandled); public: static void ShowCustomWindow(const std::wstring& class_name, const std::wstring& theme_directory, const std::wstring& layout_xml); private: //drag-drop相关 bool OnProcessAppItemDrag(ui::EventArgs* param); void DoDrag(ui::Control* pAppItem, POINT pt_offset); void DoBeforeDrag(); void DoDraging(POINT pt_offset); bool DoAfterDrag(ui::Box* check); private: std::wstring class_name_; std::wstring theme_directory_; std::wstring layout_xml_; ui::Box* frequent_app_=nullptr; ui::Box* my_app_ = nullptr; bool is_drag_state_=false; POINT old_drag_point_; AppItemUi* current_item_ = nullptr; };
layouts_form.cpp
#include "stdafx.h" #include "layouts_form.h" using namespace ui; using namespace std; LayoutsForm::LayoutsForm(const std::wstring& class_name, const std::wstring& theme_directory, const std::wstring& layout_xml) : class_name_(class_name) , theme_directory_(theme_directory) , layout_xml_(layout_xml) { } LayoutsForm::~LayoutsForm() { } std::wstring LayoutsForm::GetSkinFolder() { return theme_directory_; } std::wstring LayoutsForm::GetSkinFile() { return layout_xml_; } std::wstring LayoutsForm::GetWindowClassName() const { return class_name_; } void LayoutsForm::InitWindow() { //添加应用。应用有可能是服务器下发的，一般本地也有保存的 //loadFromDb //getFromServer---->后台可以先保存到db，再post个消息出来，界面重新从db load。 //作为demo，先写死 std::vector<AppItem> applist; CAppDb::GetInstance().LoadFromDb(applist); frequent_app_ = static_cast<ui::Box*>(FindControl(L"frequent_app")); my_app_ = static_cast<ui::Box*>(FindControl(L"my_app")); for (const auto& item: applist) { AppItemUi* pAppUi = AppItemUi::Create(item); pAppUi->AttachAllEvents(nbase::Bind(&LayoutsForm::OnProcessAppItemDrag, this, std::placeholders::_1)); if (item._isFrequent) { pAppUi->FixPos(0, frequent_app_->GetCount()); frequent_app_->Add(pAppUi); } else { pAppUi->FixPos(0, my_app_->GetCount()); my_app_->Add(pAppUi); } } } LRESULT LayoutsForm::OnClose(UINT uMsg, WPARAM wParam, LPARAM lParam, BOOL& bHandled) { PostQuitMessage(0L); return __super::OnClose(uMsg, wParam, lParam, bHandled); } LRESULT LayoutsForm::OnLButtonUp(UINT uMsg, WPARAM wParam, LPARAM lParam, BOOL& bHandled) { if (current_item_ == nullptr) { return __super::OnLButtonUp(uMsg,wParam,lParam,bHandled); } Box* pParent = current_item_->GetParent(); pParent->SetAutoDestroy(true); if (!DoAfterDrag(frequent_app_) && !DoAfterDrag(my_app_)) { //回滚 pParent->AddAt(current_item_, current_item_->getIndex()); //从index处开始补缺口 for (int index = current_item_->getIndex()+1; index < pParent->GetCount(); ++index) { AppItemUi* _pItem = dynamic_cast<AppItemUi*>(pParent->GetItemAt(index)); if (_pItem) { _pItem->FixPos(+1); } } } //更新App信息到数据库 CAppDb::GetInstance().SaveToDb(current_item_->getAppData()); is_drag_state_ = false; current_item_ = nullptr; SetForegroundWindow(m_hWnd); SetActiveWindow(m_hWnd); return __super::OnLButtonUp(uMsg, wParam, lParam, bHandled); } void LayoutsForm::ShowCustomWindow(const std::wstring& class_name, const std::wstring& theme_directory, const std::wstring& layout_xml) { LayoutsForm* window = new LayoutsForm(class_name, theme_directory, layout_xml); window->Create(NULL, class_name.c_str(), WS_OVERLAPPEDWINDOW & ~WS_MAXIMIZEBOX, 0); window->CenterWindow(); window->ShowWindow(); } //得想办法抓起鼠标弹起的一刻 bool LayoutsForm::OnProcessAppItemDrag(ui::EventArgs* param) { switch (param->Type) { case kEventMouseMove: { if (::GetKeyState(VK_LBUTTON) >= 0) break; if (!is_drag_state_) { break; } //检测位移 LONG cx = abs(param->ptMouse.x - old_drag_point_.x); LONG cy = abs(param->ptMouse.y - old_drag_point_.y); if (cx < 2 && cy < 2) { break; } //在拖拽模式下 //获取鼠标相对AppItem的位置 ui::UiRect rect = param->pSender->GetPos(); //左上角有效 POINT pt = { param->ptMouse.x - rect.left, param->ptMouse.y - rect.top }; DoDrag(param->pSender, pt); is_drag_state_ = false; } break; case kEventMouseButtonDown: { is_drag_state_ = true; old_drag_point_ = param->ptMouse; } break; case kEventMouseButtonUp: { is_drag_state_ = false; //DoDrop } break; } return true; } void LayoutsForm::DoDrag(ui::Control* pAppItem, POINT pos) { current_item_ = dynamic_cast<AppItemUi*>(pAppItem); if (nullptr==current_item_) { return; } DoBeforeDrag(); DoDraging(pos); } void LayoutsForm::DoBeforeDrag() { //抠出该项目，后面的项目全部左移 ASSERT(current_item_); if (current_item_) { Box* pParent = current_item_->GetParent(); ASSERT(pParent); pParent->SetAutoDestroy(false); //子控件不销毁 pParent->Remove(current_item_); //从index处开始补缺口 for (int index = current_item_->getIndex(); index < pParent->GetCount(); ++index) { AppItemUi* _pItem = dynamic_cast<AppItemUi*>(pParent->GetItemAt(index)); if (_pItem) { _pItem->FixPos(-1); } } } } void LayoutsForm::DoDraging(POINT pos) { //这里注意，如果只是父控件内部移动的话，会简单很多 //设置下current_item_的setmargin，重新add回去，先保留在父控件的最后一个 //index_保存之前的位置（防取消），当鼠标弹起时，再设置下合理的值，包括在父控件的位置 //跨进程移动的话，需要借用drag-drop，也是可以实现的，这里从略 //本Demo实现的是跨父控件移动（兼容父控件内部移动），并且可以移动出窗口范围，因此创建临时窗口 //非常遗憾，当临时窗口创建时，临时窗口并没有即时的拖拽感，这里采取Hook方法，在mousemove消息移动。 //这里创建新窗口 当然得确保不能重复有窗口，这里省略 AppWindow* pWindow = AppWindow::CreateAppWindow(GetHWND(), pos, current_item_->getAppData()); ASSERT(pWindow); } bool LayoutsForm::DoAfterDrag(ui::Box* check) { //获取鼠标的位置 POINT pt; GetCursorPos(&pt); ScreenToClient(m_hWnd, &pt); int findIndex = 0; UiRect rectBox = check->GetPos(); if (rectBox.IsPointIn(pt)) { //最好是重合面积更大的，这里根据鼠标位置来了 for (findIndex = 0; findIndex < check->GetCount(); findIndex++) { auto control = check->GetItemAt(findIndex); UiRect rectCtrl = control->GetPos(); if (rectCtrl.IsPointIn(pt)) { //插入到该index break; } } //合理安排区域 if (findIndex < check->GetCount()) { current_item_->FixPos(0, findIndex); check->AddAt(current_item_, findIndex); //从index处开始补缺口 for (int index = findIndex + 1; index < check->GetCount(); ++index) { AppItemUi* _pItem = dynamic_cast<AppItemUi*>(check->GetItemAt(index)); if (_pItem) { _pItem->FixPos(+1); } } return true; } else { //放到最后面 current_item_->FixPos(0, findIndex); check->Add(current_item_); return true; } } else { return false; } }
