stevenjin 2024-08-23 14:03 采纳率: 97.3%
浏览 6
已结题

bootstrap模态框拖拽移动

bootstrap模态框拖拽移动,以下代码不能实现，求解


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 基本的按钮组</title>
    
    <script src="~/lib/jquery/dist/jquery.js"></script> 
    //<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <link href="~/files/bootstrap.min.css" rel="stylesheet" />
    <script src="~/files/bootstrap-old.min.js"></script>
@*     <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.net/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> *@
</head>
<body>

    <div class="container">
        <!-- Trigger the modal -->
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            Open Modal
        </button>

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $(".modal-dialog").draggable();
        })
    </script>
</body>
</html>
  • 写回答

1条回答 默认 最新

  • Nymph_Zhu 2024-08-23 14:21
    关注

    这样试试：

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 基本的按钮组</title>

    <script src="~/lib/jquery/dist/jquery.js"></script>
    //
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <link href="~/files/bootstrap.min.css" rel="stylesheet" />
    <script src="~/files/bootstrap-old.min.js"></script>
    @*
    <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.net/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> *@
</head>

<body>

    <div class="container">
        <!-- Trigger the modal -->
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            Open Modal
        </button>

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            // 初始化模态框
            $("#myModal").modal({ backdrop: "static", keyboard: false });

            var isDragging = false;
            var $draggable = $("#myModal .modal-dialog");

            $draggable.on("mousedown", function (e) {
                isDragging = true;
                $draggable.addClass("dragging");
                var offset = $draggable.offset();
                startX = e.pageX - offset.left;
                startY = e.pageY - offset.top;
                $draggable.offset({
                    top: e.pageY - startY,
                    left: e.pageX - startX
                });
            });

            $(document).on("mousemove", function (e) {
                if (isDragging) {
                    $draggable.offset({
                        top: e.pageY - startY,
                        left: e.pageX - startX
                    });
                }
            });

            $(document).on("mouseup", function (e) {
                if (isDragging) {
                    isDragging = false;
                    $draggable.removeClass("dragging");
                }
            });
        });
    </script>
</body>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 8月31日
  • 已采纳回答 8月23日
  • 创建了问题 8月23日

悬赏问题

  • ¥15 网络分析设施点无法识别
  • ¥15 状态图的并发态问题咨询
  • ¥15 PFC3D,plot
  • ¥15 VAE模型编程报错无法解决
  • ¥100 基于SVM的信息粒化时序回归预测，有偿求解！
  • ¥15 物体组批优化问题-数学建模求解答
  • ¥15 微信原生小程序tabBar编译报错
  • ¥350 麦克风声源定位坐标不准
  • ¥15 apifox与swagger使用
  • ¥15 egg异步请求返回404的问题