如何使用jQuery UI的.draggable()、滑块及文本输入框操控Div

你当前的代码已经实现了滑块、输入框控制圆形位置的双向绑定，但拖拽圆形时无法同步更新滑块和输入框的状态。解决这个问题的关键是在拖拽过程中实时获取圆形的位置，并同步到对应的控件上。

具体修改点： #

• 给draggable添加drag事件回调，拖拽过程中实时获取圆形坐标
• 初始化页面时，将圆形的初始位置同步到滑块和输入框（避免初始状态不一致）
• 清理原代码中重复声明变量的冗余逻辑

完整代码： #

<body>
    <div class="container-fluid" id="graphBox">

        <div id="graphBack">
            <div id="head" class="ui-widget-content"></div>
        </div>

        <div class="border" id="vertSliderBox">
            <label class="slider-label" for="verticalSlider">Vertical Position:</label>
            <div id="verticalSlider" class="slider"></div>
            <input type="number" class="slider-input" id="verticalInput">
        </div>

    </div>

    <div class="container-fluid border">
        <label class="slider-label" for="horizontalSlider">Horizontal Position:</label>
        <div id="horizontalSlider" class="slider"></div>
        <input type="number" class="slider-input" id="horizontalInput">
    </div>

    <script>
        $(function () {
            // 初始化时同步圆形初始位置到滑块和输入框
            var initLeft = parseInt($("#head").css("left")) || 0;
            var initTop = parseInt($("#head").css("top")) || 20;

            $("#horizontalSlider").slider("value", initLeft);
            $("#horizontalInput").val(initLeft);
            $("#verticalSlider").slider("value", initTop);
            $("#verticalInput").val(initTop);

            $("#head").draggable({
                containment: "#graphBack",
                // 拖拽过程中实时同步位置到滑块和输入框
                drag: function(event, ui) {
                    var leftPos = ui.position.left;
                    var topPos = ui.position.top;
                    
                    $("#horizontalSlider").slider("value", leftPos);
                    $("#horizontalInput").val(leftPos);
                    
                    $("#verticalSlider").slider("value", topPos);
                    $("#verticalInput").val(topPos);
                }
            });

            $("#horizontalSlider").slider({
                range: "min",
                value: initLeft,
                min: -70,
                max: 70,
                slide: function (event, ui) {
                    $("#head").css("left", ui.value + "px");
                    $("#horizontalInput").val(ui.value);
                }
            });

            $("#horizontalInput").on("change", function () {
                var value = $(this).val();
                $("#head").css("left", value + "px");
                $("#horizontalSlider").slider("value", value);
            });

            $("#verticalSlider").slider({
                orientation: "vertical",
                range: "min",
                value: initTop,
                min: 0,
                max: 40,
                slide: function (event, ui) {
                    $("#head").css("top", ui.value + "px");
                    $("#verticalInput").val(ui.value);
                }
            });

            $("#verticalInput").on("change", function () {
                var value = $(this).val();
                $("#head").css("top", value + "px");
                $("#verticalSlider").slider("value", value);
            });
        });
    </script>
</body>

关键说明： #

1. 拖拽同步逻辑：draggable的drag事件会在拖拽过程中持续触发，通过ui.position可直接获取圆形相对于父容器的left和top坐标，无需手动计算。
2. 初始状态对齐：页面加载时先读取圆形的CSS初始位置，再同步到滑块和输入框，确保三者初始状态一致。
3. 冗余代码优化：移除了原代码中var value = 0;这类重复声明的无效代码，精简逻辑。

内容的提问来源于stack exchange，提问作者knox0