div拖动效果

1，引入jQuery实现

 <script src="js/libs/jquery/jquery.js"></script>
    
<script>   
$(function () {
           



            // jQuery实现----引入jquery

            $("#box").on("mousedown", function (e) {
                var e = window.event || e
                // 记录鼠标位置
                var ox = e.offsetX
                var oy = e.offsetY
                $(document).on("mousemove", function fn(e) {
                    var e = window.event || e
                    // 获取鼠标位置
                    var cx = e.clientX
                    var cy = e.clientY


                    // 计算并设置样式
                    var left = cx - ox
                    var top = cy - oy

                    $("#box").css({
                        left: left,
                        top: top
                    })

                })
            })
            $("#box").on("mouseup", function () {
                $(document).off("mousemove")
            })
        



        })

</script>

2、引入jquery-ui实现
       

<script src="js/libs/jquery/jquery.js"></script>
<script src="js/libs/jquery/jquery-ui.min.js"></script> 
<script>
// 拖动效果---引入jquery-ui
            $("#box").draggable();
</script>