我有一个圆形 div，它沿着较大的矩形 div 移动。我现在可以使用 .dragable() 移动它。我还需要能够使用带有输入框的滑块移动圆圈。输入框还应显示圆的当前位置。我认为这需要获取圆的当前位置，但我不知道从哪里开始。
这是我到目前为止所拥有的：
<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 () {
$("#head").draggable({
containment: "#graphBack"
});
$("#horizontalSlider").slider({
range: "min",
value: 0,
min: -70,
max: 70,
slide: function (event, ui) {
$("#head").css("left", ui.value + "px");
$("#horizontalInput").val(ui.value);
}
});
$("#horizontalInput").on("change", function () {
var value = 0;
var value = $(this).val();
$("#head").css("left", value + "px");
$("#horizontalSlider").slider("value", value);
});
$("#verticalSlider").slider({
orientation: "vertical",
range: "min",
value: 20,
min: 0,
max: 40,
slide: function (event, ui) {
$("#head").css("top", ui.value + "px");
$("#verticalInput").val(ui.value);
}
});
$("#verticalInput").on("change", function () {
var value = 20;
var value = $(this).val();
$("#head").css("top", value + "px");
$("#verticalSlider").slider("value", value);
});
});
</script>
</body>
您现有的代码看起来是一个很好的开始！当您移动滑块时，您确实获得了圆的当前位置。您已设置滑块和输入来控制圆形 div 的水平和垂直位置。
代码中缺少的一件事是当通过拖动直接移动圆形 div 时更新滑块和输入的方法。您需要在可拖动函数中添加一些逻辑，以根据 div 的当前位置更新滑块和输入。
您可以通过在draggable方法中添加拖动事件来做到这一点，如下所示：
$("#head").draggable({
containment: "#graphBack",
drag: function(event, ui) {
var leftPosition = ui.position.left;
var topPosition = ui.position.top;
// Update the horizontal slider and input
$("#horizontalSlider").slider("value", leftPosition);
$("#horizontalInput").val(leftPosition);
// Update the vertical slider and input
$("#verticalSlider").slider("value", topPosition);
$("#verticalInput").val(topPosition);
}
});
确保滑块的最小值和最大值与#graphBack容器的边界相匹配，否则您可能会发现滑块无法准确表示#head div的位置。
最后，您需要设置 #head div 的样式，使其呈圆形，并为 #graphBack 容器提供一定的大小，以便容器正常工作。你可以使用 CSS 来做到这一点，如下所示：
#graphBack {
width: 140px; /* Adjust as needed */
height: 40px; /* Adjust as needed */
position: relative;
border: 1px solid #000;
}
#head {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #000;
position: absolute;
}
应调整这些值以适合您的布局。确保滑块的最小值和最大值与这些尺寸定义的边界相匹配。