(原创)[C#] 一步一步自定义拖拽(Drag&Drop)时的鼠标效果:(一)基本原理及基本实现
一、前言
拖拽(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】-
(原创)[C#] 一步一步自定义拖拽(Drag&Drop)时的鼠标效果:(一)基本原理及基本实现的更多相关文章
- 基于vite3+tauri模拟QQ登录切换窗体|Tauri自定义拖拽|最小/大/关闭
前两天有给大家分享tauri+vue3快速搭建项目.封装桌面端多开窗口.今天继续来分享tauri创建启动窗口.登录窗口切换到主窗口及自定义拖拽区域的一些知识.希望对想要学习或正在学习的小伙伴有些帮助. ...
- [Android]仿新版QQ的tab下面拖拽标记为已读的效果
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/4182929.html 可拖拽的红点,(仿新版QQ,tab下面拖 ...
- 【原创】js实现一个可随意拖拽排序的菜单导航栏
1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换 ...
- Angular 自定义拖拽指令
指令 组件是一种带模版的指令.指令是超级. 结构型指令(改变布局)和属性型指令(改变外观和行为). Renderer2和ElementRef Angular不提倡直接操作DOM 对于DOM的操作应该通 ...
- elementUI 弹出框添加可自定义拖拽和拉伸功能,并处理边界问题
开发完后台管理系统的弹出框模块,被添加拖拽和拉伸功能,看了很多网上成熟的帖子引到项目里总有一点问题,下面是根据自己的需求实现的步骤: 首先在vue项目中创建一个js文件eg:dialog.js imp ...
- html5 拖拽(drag)和f放置(drop)
知识要点 HTML5 (drag&drop) API (Event) 拖放数据(对象):DataTransfer 拖放内容:setData getData 拖放效果(动作):dropEffe ...
- vue 自定义拖拽指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- div拖拽到iframe上方 导致 缩放和拖拽的不平滑和鼠标事件未放开 解决方法
思路一:用在开始进行缩放(触发了resizable的start事件)为iframe添加z-index属性,将iframe放置在最下层. $("#draggable").resiza ...
- 基于Vue实现拖拽效果
参考地址:基于Vue实现拖拽效果 参考链接中讲的比较详细,我只使用了其中自定义指令的方法.整体代码如下: <template> <!-- 卡片 --> <div clas ...
随机推荐
- 【C#基础概念】程序集清单
.NET Core 程序集(模块)还包含描述程序集本身的元数据,我们称之为清单.清单记录了当前程序集正常运行所需的所有外部程序集.程序集的版本号.版权信息.模块 .资源(图片 xml等)等.与类型元数 ...
- JVM学习笔记(详细)
目录 01 JVM与Java体系结构 简介 JVM整体架构,HotSpot java代码执行流程 JVM架构模型 JVM生命周期 JVM发展历程 02 类加载子系统 JVM细节版架构 类加载器的作用 ...
- 修改Ehcache缓存中取到的值,缓存中的值也被修改了
问题现象 我们从Ehcache中取出缓存的对象,之后将对象中的属性进行了修改使用.等再次从缓存中拿到对象后,发现对象的值变成了上一次调用修改后的对象了. 原因 Ehcache中缓存的是原对象的引用,所 ...
- 哈工大 计算机网络 实验四 利用 Wireshark 进行协议分析
计算机网络实验代码与文件可见github:计算机网络实验整理 实验名称 利用 Wireshark 进行协议分析 实验目的: 本次实验的主要目的. 熟悉并掌握Wireshark的基本操作,了解网络协议实 ...
- Java:代码改进技巧
1.类名首字母大写:方法名首字母小写:常量名全大写: 2.当控制语句只有一句时,可以省略大括号{}:但是,建议任何时候都保留大括号,因为这是Java语句块的标志 3.用某个接口承接实现类时(多态),之 ...
- 01_c语言再学习_基础部分(1)
目录: 1.编译基础 2.c语言关键字 3.c语言数据类型 4.二进制/8进制/16进制 5.计算机内存数值存储方式:sizeof/原码/反码/补码 6.c语言中的字符和字符串 7.c语言中的数组和字 ...
- redis缓存雪崩和缓存穿透
缓存雪崩:由于原有的缓存过期失效,新的缓存还没有缓存进来,有一只请求缓存请求不到,导致所有请求都跑去了数据库,导致数据库IO.内存和CPU眼里过大,甚至导致宕机,使得整个系统崩溃. 解决思路:1,采用 ...
- 面试官:Redis的共享对象池了解吗?
我正在面试间里焦急地等待着,突然听到了门外的脚步声,随即门被打开,穿着干净满脸清秀的青年走了进来,一股男士香水的淡香扑面而来. 面试官:"平时在工作中用过Redis吗?" 我:&q ...
- JZ-067-剪绳子
剪绳子 题目描述 给你一根长度为n的绳子,请把绳子剪成整数长的m段(m.n都是整数,n>1并且m>1,m<=n),每段绳子的长度记为k[1],...,k[m]. 请问k[1]x... ...
- Linux CentOS7.X- 添加用户
1.创建用户 useradd username 其中,username是要创建用户的用户名(root使用): 2.设置密码 passwd username 其中,username是指定要修改密码的用户 ...
