JQuery实现鼠标拖动元素移动位置

这篇博客介绍了如何使用JQuery实现元素的移动,包括根据方向键在指定区域平移和跟随鼠标自由移动两种方式。平移的精度和用户体验是讨论的重点,提供了HTML和jQuery代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

JQuery实现元素移动位置有很多种方法,其中一个是根据鼠标在指定区域内随意移动,还有一种的是根据方向键在一定区域内上下左右平移。这二种只能说各有优劣,通过方向键平移,实现相对简单,操作也更具备可控性,但是就是移动效率相对较低,每次平移量过大造成不够精准,平移量过小则会使移动过程更为繁琐。跟随鼠标自由移动,可以自由控制平移量,精准的移动到自己想要的位置,但是实现较为复杂,并且控制过程中容易出现体验卡顿等。

一 根据方向键移动
这里写图片描述
HTML部分

<div class="content_room">
     <div class="room_text">欢迎各位领导前来视察工作</div>
</div>
<div class="add_metting_list">
<div class="subject_title">调整内容区位置:</div>
<div class="control_direction">
<div class="top"><img src="img/top.png"></div>
<div class="left"><img src="img/left.png"></div>
<div class="right"><img src="img/right.png"></div>
<div class="bottom"><img src="img/bottom.png"></div>
</div>
< </div>```
jQuery部分,仅展示出上升部分,下左右类似。
        $(".top").click(function () {
            var top=$(".room_text").css("top");
            var top_num =top.replace('px','');
            var top_new=top_num*1-5*1;
            if(top_new<5){
                alert("已到顶部");
            }else{
                var top_css=top_new+'px';
                $(".room_text").css('top',top_css);
            }
        });

二 根据鼠标在指定区域内随意移动
这里写图片描述
标题,内容,下标区都可以根据鼠标在指定区域块移动
HTML部分

    <div class="card" id="title">
        <!--<img src="img/loginbg.png"  >-->
        <div class="first_line">成都超极限文化传播有限公司</div>
        <div class="second_line">王欻欻</div>
        <div class="third_line">职务:软件工程师</div>

    </div>
jQuery部分
   var x1,y1,x2,y2,offleft,offtop,isclik=0;
    $(function() {
        var wmax=500-$(".first_line").width();
        var hmax=300-$(".first_line").height();
        $(".first_line").mousedown(function(e){
            x1=e.pageX;
            y1=e.pageY;
            offleft=parseInt($(".first_line").css('left'));
            offtop=parseInt($(".first_line").css('top'));
            isclik=1;
        });
        $(".card").mousemove(function(e){
            if(isclik==1){
                x2=e.pageX;
                y2=e.pageY;
                var xx=x2-x1+offleft;
                var yy=y2-y1+offtop;
                if(xx>=0&&xx<wmax){
                    $(".first_line").css('left',xx+"px");
                }
                if(yy>=0&&yy<hmax-1){
                    $(".first_line").css('top',yy+"px");
                }
            }

        }).mouseup(function(){
            isclik=0;
        });
        second_line和third_line的移动类似,只需要改动部分变量名。

这里主要是一个html截图与jQuery实现代码,具体细节欢迎留言讨论。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值