鼠标拖拽效果的实现

我所说的“鼠标拖拽效果”是指,鼠标在某个图标上按下,然后拖动,图标随着鼠标移动;这个效果的实现依赖控件的三个事件:Mouse_Down,Mouse_Move,Mouse_Up

  1. 首先在Mouse_Down事件设置”拖动”标志,表明鼠标已经按下,将要移动;同时记录鼠标的起始位置
  2. 然后在Mouse_Move事件计算鼠标的新位置,将图标设置到鼠标的位置,重新绘图
  3. 最后在Mouse_Up事件关闭”拖动”标志,标志鼠标已经弹起

实现如下:

首先,在Visual Studio 2010创建一个“Windows窗体应用程序”项目,在Form上任意拖入一个控件(比如Button,Label等,为了看得明白,我这里拖入的是PictureBox控件),为PictureBox的Image属性设置图片,效果如下:

 

 

然后修改Form对应的代码:

首先为Form增加两个实例变量,分别为拖动标识和PictureBox控件的位置

View Code
#region Fields

private Boolean m_bDragFlag = false;
private Point m_oStartLocation;

#endregion

 

然后为PictureBox控件实现Mouse_Down,Mouse_Move,Mouse_Up事件

View Code
#region Events

        //PictureBox.Click事件
        private void pbxDrag_Click(object sender, EventArgs e)
        {
            //0.取控件实例
            var pbxDrag = sender as PictureBox;

            //1.用边框模拟选中状态
            pbxDrag.BorderStyle = BorderStyle.FixedSingle;
        }

        //PictrueBox.MouseDown事件(鼠标在控件上按下左键触发)
        private void pbxDrag_MouseDown(object sender, MouseEventArgs e)
        {
            //0.取控件实例
            var pbxDrag = sender as PictureBox;

            //1.设置"拖动"标识
            this.m_bDragFlag = true;

            //2.设置鼠标形状
            this.Cursor = Cursors.SizeAll;

            //3.设置初始位置
            this.m_oStartLocation = pbxDrag.Location;
        }
        //PictureBox.MouseMove事件(鼠标在控件上移动后触发)
        private void pbxDrag_MouseMove(object sender, MouseEventArgs e)
        {
            //0.取控件实例
            var pbxDrag = sender as PictureBox;

            if (this.m_bDragFlag)
            { 
                //1.设置鼠标形状
                this.Cursor = Cursors.Default;

                //2.设置控件新位置
                pbxDrag.Location = new Point(this.m_oStartLocation.X + e.X, this.m_oStartLocation.Y + e.Y);

                //3.重新绘制图形
                this.Invalidate();
                this.Update();

                //4.修正位置
                this.m_oStartLocation = pbxDrag.Location;
            }
        }
        //PictureBox.MouseUp事件(鼠标在控件上弹起时触发)
        private void pbxDrag_MouseUp(object sender, MouseEventArgs e)
        {
            //0.设置鼠标形状
            this.Cursor = Cursors.Default;

            //1.设置"拖动"标识
            this.m_bDragFlag = false;
        }

        #endregion

 

 

 

转载于:https://www.cnblogs.com/huaisha/archive/2013/03/24/2978145.html

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现鼠标拖拽轮播,可以结合 Vue 和第三方插件来完成。以下是一个基于 Vue 和 vue-awesome-swiper 插件实现鼠标拖拽轮播的示例: 1. 安装 vue-awesome-swiper 插件 ``` npm install vue-awesome-swiper --save ``` 2. 在 Vue 组件中引入并初始化 swiper 组件 ``` <template> <div class="swiper-container" ref="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(item, index) in list" :key="index"> <img :src="item.imgUrl" alt=""> </div> </div> </div> </template> <script> import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper) export default { data () { return { list: [ { imgUrl: 'http://xxx.com/1.jpg' }, { imgUrl: 'http://xxx.com/2.jpg' }, { imgUrl: 'http://xxx.com/3.jpg' }, { imgUrl: 'http://xxx.com/4.jpg' } ] } }, mounted () { this.$nextTick(() => { this.swiper = new this.$swiper(this.$refs.swiper, { slidesPerView: 'auto', freeMode: true, freeModeMomentumRatio: 0.5, freeModeMomentumBounce: false, freeModeMinimumVelocity: 0.1, grabCursor: true, mousewheel: true, resistanceRatio: 0.1 }) }) }, beforeDestroy () { if (this.swiper) { this.swiper.destroy() } } } </script> <style lang="scss"> .swiper-container { width: 100%; height: 100%; .swiper-wrapper { display: flex; .swiper-slide { width: 33.33%; img { width: 100%; } } } } </style> ``` 3. 在 mounted 钩子中初始化 swiper 实例,并设置相关参数。 ``` mounted () { this.$nextTick(() => { this.swiper = new this.$swiper(this.$refs.swiper, { slidesPerView: 'auto', freeMode: true, freeModeMomentumRatio: 0.5, freeModeMomentumBounce: false, freeModeMinimumVelocity: 0.1, grabCursor: true, mousewheel: true, resistanceRatio: 0.1 }) }) } ``` 通过设置 `freeMode: true` 启用 freeMode 模式,`grabCursor: true` 启用鼠标拖拽模式,`mousewheel: true` 启用鼠标滚轮控制模式等参数,可以实现鼠标拖拽轮播效果
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值