一、前言
拖拽(Drag&Drop),屬於是極其常用的基礎功能。
無論是在系統上、應用上、還是在網頁上,拖拽隨處可見。同時拖拽時的滑鼠效果也很漂亮,像這樣:
這樣:
還有這樣:
等等等等。
這些拖拽時的滑鼠效果,直觀又美觀。
然後,在我們寫程式時,程式確實是支援了拖拽,但是效果卻是這樣的:
很是樸實無華。
而在某些時候,我們的程式也需要比較個性化的拖拽效果。
所以,我們就通過這一系列文章,來一步一步實現自己的個性化拖拽效果,同時,也會去仿一些經典的拖拽效果。
相信看完的你,一定會有所收穫!
本文地址:https://www.cnblogs.com/lesliexin/p/16073879.html
二、基本原理
(一)基本事件方法
與拖拽相關的事件和方法,一共有7個:
1,DragDrop:在完成拖放操作時發生。
2,DragEnter:在將物件拖入控制元件的邊界時發生。
3,DragLeave:在將物件拖出控制元件的邊界時發生。
4,DragOver:在將物件拖到控制元件的邊界上發生。
5,DoDragDrop:開始拖放操作。
6,GiveFeedback:在執行拖動操作期間發生。
7,QueryContinueDrag:在拖放操作期間發生,並且允許拖動源確定是否應取消拖放操作。
其中:
作用於拖拽發起方的是:
1,DoDragDrop
2,GiveFeedback
3,QueryContinueDrag
作用於拖拽接收方的是:
1,DragDrop
2,DragEnter
3,DragLeave
4,DragOver
(二)拖拽時上事件方法作用流程
上述7個事件的和方法的作用時機和流程如下,摘自MSDN:
(這裡不得不說,之前的離線版的MSDN是真好用,主要是翻譯的到位。現在的線上微軟Docs,大多都是機翻,差太多了。)
簡單的拖拽演示
在這裡,簡單寫一個演示程式,演示下上述各方法和事件具體的呼叫和實現。
演示程式的效果,就是拖動標籤(Label)到另一個標籤(Label)上,根據是否按著Shift、Ctrl等鍵,實現不同的效果。
1,設計介面
介面的設計如下,分別實現圖中對應的事件和屬性。
2,拖拽發起方
對於拖拽的發起方,要實現的便是:在滑鼠點選後,按著左鍵移動滑鼠到目標位置,並根據是否按著Shift、Ctrl等鍵,實現不同的效果。
所以,涉及到的事件有:MouseDown、MouseMove、MouseUp。
程式碼如下:
3,拖拽接收方
對於拖拽接收方,既然需要接收拖拽其上的資料,那麼就需要將屬性 AllowDrop 設定為 true,表示允許接收拖拽。
同時,還要實現DragEnter、DragDrop、DragDrop等事件,以在滑鼠拖動資料到控制元件上後,根據按鈕狀態,設定不同的效果,並對拖動的資料,進行進一步處理。
程式碼如下:
4,實際演示
執行程式,效果如下:
三、自定義拖拽時滑鼠效果
在這裡,我們來實現一個簡單的自定義拖拽效果:
拖動圖片到另一個控制元件上,在拖拽時,滑鼠變為圖片;同時,如果控制元件不允許接收圖片,則圖片變為半透明;如果允許接收圖片,則圖片變為不透明。
下面我們來看一下如何去實現這種效果。
(一)實現原理
通過上面的MSDN,我們知道,在GiveFeedback,可以進一步的判斷拖放狀態效果,進而進行一定的處理。
而我們上面的效果,就要在GiveFeedback中去操作。
操作方式也很簡單,就是根據不同的拖放效果,改變不同的滑鼠即可,當然這裡的滑鼠是我們根據圖片實時生成的。
(二)開始實現
1,介面設計
介面的設計如下,分別實現圖中對應的事件和屬性。
這裡需要注意下,我們為窗體(Form)也設定了 AllowDrop=true,這是為了使拖動時劃過非目標控制元件時,也能響應變化。
2,拖拽發起方
此處和上文的實現原理是一樣的,涉及到的事件有:MouseDown、MouseMove、MouseUp。
程式碼如下:
3,拖拽接收方
此處和上文的實現原理是一樣的,要實現DragEnter、DragDrop、DragDrop等事件。
程式碼如下:
4,GiveFeedback實現滑鼠樣式切換
GiveFeedback,就是用來實現不同的拖拽效果的地方。
因為涉及到圖片的透明度處理,以及尺寸的調整,所以我們首先寫個方法去處理下圖片。
接著,在GiveFeedback中,針對不同的拖放狀態,設定不同的滑鼠。
4,實際演示
執行程式,效果如下:
四、原始碼下載
本篇文章演示程式的完整原始碼下載:
https://files.cnblogs.com/files/lesliexin/DragDropDemo.zip
五、總結
說實話,在拖拽時實現拖拽效果並不難,而且MSDN上自帶的例子也涉及到了滑鼠的切換,稍微轉換下思路,就可以實現多種多樣的拖拽效果。
不過話說回來,這種拖拽效果的實現邏輯和教程,反而很難在網上搜到,真是奇怪。
在系列後續,會去實現一些個性化的拖拽效果,以及去仿一些經典拖拽效果,如:Win10/Win11中開始選單的拖拽效果,網頁中的拖拽效果等等。還會分享下在實現這些效果時,所遇到的問題,以及解決經驗。
感謝觀看,歡迎大家評論指正。
-【END】-