C#自定义鼠标拖拽Drag&Drop效果之基本原理及基本实现代码

目录
  • 一、前言
  • 二、基本原理
    • 1,设计界面
    • 2,拖拽发起方
    • 3,拖拽接收方
    • 4,实际演示
  • 三、自定义拖拽时鼠标效果
    • 1,界面设计
    • 2,拖拽发起方
    • 3,拖拽接收方
    • 4,GiveFeedback实现鼠标样式切换
    • 4,实际演示
  • 四、源码下载
  • 五、总结

一、前言

拖拽(Drag&Drop),属于是极其常用的基础功能。
无论是在系统上、应用上、还是在网页上,拖拽随处可见。同时拖拽时的鼠标效果也很漂亮,像这样:

这样:

还有这样:

等等等等。
这些拖拽时的鼠标效果,直观又美观。
然后,在我们写程序时,程序确实是支持了拖拽,但是效果却是这样的:

很是朴实无华。
而在某些时候,我们的程序也需要比较个性化的拖拽效果。
所以,我们就通过这一系列文章,来一步一步实现自己的个性化拖拽效果,同时,也会去仿一些经典的拖拽效果。

相信看完的你,一定会有所收获!

本文地址:https://www.jb51.net/article/243532.htm

二、基本原理

(一)基本事件方法

与拖拽相关的事件和方法,一共有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,实际演示

运行程序,效果如下:

四、源码下载

本篇文章演示程序的完整源代码下载:

http://xiazai.jb51.net/202204/yuanma/DragDropDemo_jb51.rar

五、总结

说实话,在拖拽时实现拖拽效果并不难,而且MSDN上自带的例子也涉及到了鼠标的切换,稍微转换下思路,就可以实现多种多样的拖拽效果。
不过话说回来,这种拖拽效果的实现逻辑和教程,反而很难在网上搜到,真是奇怪。
在系列后续,会去实现一些个性化的拖拽效果,以及去仿一些经典拖拽效果,如:Win10/Win11中开始菜单的拖拽效果,网页中的拖拽效果等等。还会分享下在实现这些效果时,所遇到的问题,以及解决经验。

到此这篇关于C#自定义鼠标拖拽Drag&Drop效果之基本原理及基本实现代码的文章就介绍到这了,更多相关C#自定义鼠标拖拽内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • C#控件Picturebox实现鼠标拖拽功能

    工作需要,要在一个Form里面实现一个实时预览的picturebox图像,由于picturebox可能会遮挡到其后面的画面,所以要求picturebox可以由用户自行拖拽,类似于悬浮框. 原理说明 在网上兜了几圈之后,决定用三段代码实现.首先要注册鼠标的三个事件:移动.鼠标左键按下.鼠标左键抬起,当然,都是在picturebox上的动作.注册三个事件后,即可以在三个对应的事件函数里面实现拖拽. 代码实例 首先在窗体设计器生成的代码里面注册picturebox的鼠标事件.注:网上说当你添加pict

  • 解决C# winForm自定义鼠标样式的两种实现方法详解

    第一种:(调用系统API)首先引入两个命名空间 复制代码 代码如下: using System.Runtime.InteropServices;using System.Reflection; 导入API 复制代码 代码如下: [DllImport("user32.dll")]public static extern IntPtr LoadCursorFromFile(string fileName);[DllImport("user32.dll")]public

  • C# ListBox中的Item拖拽代码分享

    我们先来看下运行效果图 Form1.cs代码: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; using System

  • C#自定义鼠标拖拽Drag&Drop效果之基本原理及基本实现代码

    目录 一.前言 二.基本原理 1,设计界面 2,拖拽发起方 3,拖拽接收方 4,实际演示 三.自定义拖拽时鼠标效果 1,界面设计 2,拖拽发起方 3,拖拽接收方 4,GiveFeedback实现鼠标样式切换 4,实际演示 四.源码下载 五.总结 一.前言 拖拽(Drag&Drop),属于是极其常用的基础功能.无论是在系统上.应用上.还是在网页上,拖拽随处可见.同时拖拽时的鼠标效果也很漂亮,像这样: 这样: 还有这样: 等等等等.这些拖拽时的鼠标效果,直观又美观.然后,在我们写程序时,程序确实是支

  • JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例

    本文实例讲述了JS实现鼠标拖拽盒子移动及右键点击盒子消失效果.分享给大家供大家参考,具体如下: 1. 鼠标拖拽盒子移动效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } div{ width: 1

  • js实现登录框鼠标拖拽效果

    效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录框鼠标拖拽效果</title> <style type="text/css"> body { background: url("https://timgsa.baidu.com/timg?i

  • js实现百度登录框鼠标拖拽效果

    以百度的登录窗口为例,学习鼠标拖拽效果如何实现,拖拽范围限定以及登录窗口自动居中.学会如何制作弹出窗口特效,了解把元素设置为可拖拽的原理. 知识点: 1.掌握对可拖拽对话框的实现原理 2.了解元素如何触发脚本方法以及如何编写侦听事件 3. 学会设置元素在页面中居中和全屏 注意区别: 1.screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. 2.clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照

  • 基于jquery实现的鼠标拖拽元素复制并写入效果

    直接上代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq

  • jquery实现鼠标拖拽滑动效果来选择数字的方法

    本文实例讲述了jquery实现鼠标拖拽滑动效果来选择数字的方法.分享给大家供大家参考.具体如下: 这是使用jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

  • Vue 实现一个简单的鼠标拖拽滚动效果插件

    最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了. github 地址:github.com/qq449245884- 最近在做一个新的项目,有个需要是这样的: 简单描述一下,就是鼠标拖动页面,整个页面会随着的鼠标的拖拽而移动,如果页面有内容,里面的内容也需要跟着拖动的外层整体移到. 一开始没啥思路,所以就发了个朋友圈,得到的答案挺多的,主要还是用拖拽之类的,但这个拖拽只是单个元素的拖动,我想要的整个视图的拖动. 这里线索又断了.

  • JavaScript实现div的鼠标拖拽效果

    本文实例为大家分享了JavaScript实现div鼠标拖拽效果的具体代码,供大家参考,具体内容如下 实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的. HTML <div class="box"></div> CSS样式 .box { position: absolute; width: 200px; height: 200px; background: re

  • JavaScript实现鼠标拖拽效果

    本文实例为大家分享了JavaScript实现鼠标拖拽效果的具体代码,供大家参考,具体内容如下 这次的效果图如下: 我认为这个实验的难点是保持盒子和鼠标的相对位置不变,通过鼠标按下和移动来实现拖拽的效果 如何实现拖拽的效果呢? 我们需要用到三个函数: onmousedown.onmousemove.onmouseup,分别表示鼠标按下.鼠标移动.鼠标抬起 在鼠标按下的回调函数中,我们需要通过clientX和clientY获取鼠标的初始位置,通过offsetLeft和offsetTop获取盒子的初始

  • 使用纯JS实现checkbox的框选效果(鼠标拖拽多选)

    目录 主要思路 css 代码如下 html结构如下 js主要逻辑如下 总结 主要思路 用一个盒子作为选区,通过定位让其固定在左上角,由于没有给定选区元素的宽高所以默认不显示,在 onmousemove 中动态获取选区定位的top left bottom right四个属性,同时将鼠标拖拽的距离作为选区的宽高,由于给选区元素的css设置了border就呈现出如图所示的框选效果.(注意:要想自己手动勾选复选框,要给选区元素的css设置pointer-events: none;否则点击复选框的事件会被

随机推荐