学习用JQuery实现div拖拽笔记

起因

课程设计中需要用到浏览器中拖拽div的功能,而我对如何实现还不太清楚,于是便去网上搜索了一段功能实现代码。

功能实现

感谢:实现div鼠标拖动效果

<!--
 * @Author: ahy231
 * @Date: 2020-11-29 14:03:47
 * @LastEditors: ahy231
 * @LastEditTime: 2020-11-29 22:51:04
-->

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>jquery实现div拖拽</title>
<script src="https://how2j.cn/study/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
    #moveBar {
    position: absolute;
    width: 200px;
    height: 400px;
    background: black;
    color: yellowgreen; 
    border: solid 1px #000;
    }
    #banner {
    background: #ddd;
    cursor: move;
    }
</style>
</head>
<body>
    <!-- <div id="test">
        <span id="first">first</span><br>
        <span id="second">second</span>
    </div> -->
    <div id="moveBar">
        <div id="banner">按住鼠标移动当前div</div>
        <div id="content">内容部分</div>
    </div>
<script>
    $(function () {
        dragPanelMove("#banner","#moveBar");
        function dragPanelMove(downDiv,moveDiv){
            $(downDiv).mousedown(function (e) {
                    var isMove = true;
                    // e指的是鼠标对象
                    var div_x = e.pageX - $(moveDiv).offset().left;
                    var div_y = e.pageY - $(moveDiv).offset().top;
                    // $("#first").text(div_x);
                    // $("#second").text(div_y);
                    $(document).mousemove(function (e) {
                        if (isMove) {
                            // var obj = $(moveDiv);
                            // obj.css({"left":e.pageX - div_x, "top":e.pageY - div_y});
                            $(moveDiv).css({"left":e.pageX - div_x, "top":e.pageY - div_y});
                            // $(moveDiv).css({"left":$(moveDiv).offset().left, "top":$(moveDiv).offset().top});
                        }
                    }).mouseup(
                        function () {
                        isMove = false;
                    });
            });
 
        }
 
    });
</script>
</body>

我在原文的基础上,增加了一些注释,用来方便理解代码含义。
其中div_xdiv_y分别表示鼠标点击moveDiv时距离moveDiv左上角的距离,用于下文中函数的计算。

$(moveDiv).css({"left":e.pageX - div_x, "top":e.pageY - div_y});

这句是功能实现的核心代码,通过JQuery中设置css的方法将moveDiv位置设置为鼠标最终拖动的位置,从而达到鼠标拖动div的效果。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值