51工具盒子英文:
How to manipulate a div using .draggable(), sliders, and text input using JqueryUI
问题 {#heading}
我有一个圆形的 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">垂直位置：</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">水平位置：</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 = $(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 = $(this).val();
$("#head").css("top", value + "px");
$("#verticalSlider").slider("value", value);
});
});
</script>
</body>
请注意，这是你的原始代码，我没有进行任何翻译。如果你需要进一步的帮助或解释，请随时提问。 英文:
I have a circular div that moves along a larger rectangular div. I can move it around using .dragable() as of right now. I need to be able to also move the circle with sliders that have input boxes. The input boxes should also show the current position of the circle. I think this requires getting the current position of the circle but I dont know where to start.
This is what I have so far:
<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>
答案1 {#1}
得分: 1
你现有的代码看起来很不错！当你移动滑块时，确实可以获取圆形的当前位置。你已经设置了滑块和输入来控制圆形div的水平和垂直位置。
你的代码中缺少的一点是，当直接拖动圆形div时，更新滑块和输入的方式。你需要在可拖动函数内部添加一些逻辑，以根据div的当前位置更新滑块和输入。
你可以通过在可拖动方法内添加拖动事件来实现，就像这样：
$("#head").draggable({
containment: "#graphBack",
drag: function(event, ui) {
var leftPosition = ui.position.left;
var topPosition = ui.position.top;
// 更新水平滑块和输入
$("#horizontalSlider").slider("value", leftPosition);
$("#horizontalInput").val(leftPosition);
// 更新垂直滑块和输入
$("#verticalSlider").slider("value", topPosition);
$("#verticalInput").val(topPosition);
}
});
确保滑块的最小值和最大值与#graphBack容器的边界匹配，否则可能会发现滑块不准确表示#head div的位置。
最后，你需要为#head div添加样式，使其成为圆形，并为#graphBack容器添加一些大小，以确保容纳正常工作。你可以使用以下CSS来实现：
#graphBack {
width: 140px; /* 根据需要调整 */
height: 40px; /* 根据需要调整 */
position: relative;
border: 1px solid #000;
}
#head {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #000;
position: absolute;
}
这些值应根据你的布局进行调整。确保滑块的最小值和最大值与这些尺寸定义的边界匹配。
要使#head div位于#graphBack容器的中心，并使滑块默认到这些中心位置，你需要对JavaScript和CSS进行一些调整。
以下是如何实现的：
CSS：
首先，你需要设置CSS，使#head在#graphBack容器的中心开始：
#graphBack {
width: 140px; /* 根据需要调整 */
height: 40px; /* 根据需要调整 */
position: relative;
border: 1px solid #000;
}
#head {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #000;
position: absolute;
left: 50%; /* 水平居中 */
top: 50%; /* 垂直居中 */
transform: translate(-50%, -50%); /* 根据#head的大小进行调整 */
}
JavaScript：
接下来，你需要更新JavaScript，将滑块和输入的初始值设置为中心位置：
$(function () {
// 获取中心位置
var centerLeft = $("#graphBack").width() / 2 - $("#head").width() / 2;
var centerTop = $("#graphBack").height() / 2 - $("#head").height() / 2;
// 设置#head的初始位置
$("#head").css({ left: centerLeft, top: centerTop });
$("#head").draggable({
containment: "#graphBack",
drag: function(event, ui) {
$("#horizontalSlider").slider("value", ui.position.left);
$("#horizontalInput").val(ui.position.left);
$("#verticalSlider").slider("value", ui.position.top);
$("#verticalInput").val(ui.position.top);
}
});
$("#horizontalSlider").slider({
range: "min",
value: centerLeft, // 设置初始值
min: 0,
max: $("#graphBack").width() - $("#head").width(),
slide: function (event, ui) {
$("#head").css("left", ui.value + "px");
$("#horizontalInput").val(ui.value);
}
});
$("#verticalSlider").slider({
orientation: "vertical",
range: "min",
value: centerTop, // 设置初始值
min: 0,
max: $("#graphBack").height() - $("#head").height(),
slide: function (event, ui) {
$("#head").css("top", ui.value + "px");
$("#verticalInput").val(ui.value);
}
});
// 设置输入框的初始值
$("#horizontalInput").val(centerLeft);
$("#verticalInput").val(centerTop);
// ... 其余代码
});
确保在CSS和JavaScript中调整#graphBack和#head的尺寸（例如滑块的最小和最大值），以匹配你的所需布局。
现在，#head div应该从#graphBack容器的中心开始，滑块和输入框应该默认到这些中心位置！ 英文:
Your existing code looks like a great start! You are indeed getting the current position of the circle when you move the sliders. You've set up sliders and inputs to control the horizontal and vertical position of the circular div.
One thing that's missing from your code is a way to update the sliders and inputs when the circular div is moved directly by dragging it. You'll need to add some logic inside the draggable function to update the sliders and inputs based on the current position of the div.
You can do that by adding a drag event inside the draggable method, like this:
$("#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);
}
});
Make sure the min and max values for the sliders match the boundaries of the #graphBack container, or else you might find that the sliders don't accurately represent the position of the #head div.
Lastly, you'll want to style the #head div to make it circular and give some size to the #graphBack container, so the containment works properly. You can do that with CSS like this:
#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;
}
These values should be adjusted to suit your layout. Make sure that the min and max values of your sliders match the boundaries defined by these dimensions.
To center the #head div within the #graphBack container and have the sliders default to those center positions, you will need to make a few adjustments to your JavaScript and CSS.
Here's how you can achieve that:
CSS:
First, you'll need to set the CSS so that the #head starts in the center of the #graphBack container:
#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;
left: 50%; /* Center horizontally */
top: 50%; /* Center vertically */
transform: translate(-50%, -50%); /* Adjust for the size of #head */
}
JavaScript:
Next, you'll need to update the JavaScript to set the initial values of the sliders and inputs to the center positions:
$(function () {
// Get the center positions
var centerLeft = $("#graphBack").width() / 2 - $("#head").width() / 2;
var centerTop = $("#graphBack").height() / 2 - $("#head").height() / 2;
// Set the initial position of the #head
$("#head").css({ left: centerLeft, top: centerTop });
$("#head").draggable({
containment: "#graphBack",
drag: function(event, ui) {
$("#horizontalSlider").slider("value", ui.position.left);
$("#horizontalInput").val(ui.position.left);
$("#verticalSlider").slider("value", ui.position.top);
$("#verticalInput").val(ui.position.top);
}
});
$("#horizontalSlider").slider({
range: "min",
value: centerLeft, // Set the initial value
min: 0,
max: $("#graphBack").width() - $("#head").width(),
slide: function (event, ui) {
$("#head").css("left", ui.value + "px");
$("#horizontalInput").val(ui.value);
}
});
$("#verticalSlider").slider({
orientation: "vertical",
range: "min",
value: centerTop, // Set the initial value
min: 0,
max: $("#graphBack").height() - $("#head").height(),
slide: function (event, ui) {
$("#head").css("top", ui.value + "px");
$("#verticalInput").val(ui.value);
}
});
// Set the initial value of the input boxes
$("#horizontalInput").val(centerLeft);
$("#verticalInput").val(centerTop);
// ... rest of your code
});
Make sure to adjust the dimensions of #graphBack and #head in both the CSS and JavaScript (such as the min and max values for the sliders) to match your desired layout.
Now the #head div should start in the center of the #graphBack container, and the sliders and inputs should default to those center positions!
