StackOverflow社区！在过去的几周里，我一直在为HTML/JavaScript开发一个拖放功能。基本上，我有一个圆圈和两个方框。圆圈可以被拖到屏幕上的任何地方。但是，我需要它，所以圆圈只能被拖到两个方框中的一个。尽管研究了几天，我还是不知道该怎么做。提前感谢！
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
user-scalable=no" />
<title>Drag/Drop/Bounce</title>
<style>
#item {
width: 100px;
height: 100px;
background-color: rgb(245, 230, 99);
border: 10px solid rgba(136, 136, 136, .5);
border-radius: 50%;
touch-action: none;
user-select: none;
}
#box1 {
width: 200px;
height: 200px;
background-color: red;
}
#box2 {
width: 200px;
height: 200px;
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Drag and Drop</h1>
<div id="box1">
<div id="item"></div>
</div>
<br>
<div id="box2"></div>
<script>
var dragItem = document.querySelector("#item");
var container = dragItem;
//Declare Variables
var active = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;
//Add Event Listeners for Touchscreens
container.addEventListener("touchstart", dragStart, false);
container.addEventListener("touchend", dragEnd, false);
container.addEventListener("touchmove", drag, false);
//Add Event Listeners for Mice
container.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);
function dragStart(e) { //when the drag starts
if (e.type === "touchstart") { //if its a touchscreen
initialX = e.touches[0].clientX - xOffset; //set initial x-cordinate to where it was before drag started
initialY = e.touches[0].clientY - yOffset; //set initial y-cordinate to where it was before drag started
} else { //if its not a touchscreen (mouse)
initialX = e.clientX - xOffset; //set initial x-cordinate to where it was before drag started
initialY = e.clientY - yOffset; //set initial y-cordinate to where it was before drag started
}
if (e.target === dragItem) { //if user is dragging circle
active = true; //the drag is active
}
}
function dragEnd(e) { //when the drag ends
initialX = currentX; //set the initial x-cordinate to where it is now
initialY = currentY; //set the initial y-cordinate to where it is now
active = false; //the drag is no longer active
}
function drag(e) { //when the circle is being dragged
if (active) { //if the drag is active
e.preventDefault(); //the user cant do anything else but drag
if (e.type === "touchmove") { //if its a touchscreen
currentX = e.touches[0].clientX - initialX; //set current x-cordinate to where it is now
currentY = e.touches[0].clientY - initialY; //set current y-cordinate to where it is now
} else { //if its not a touchscreen (mouse)
currentX = e.clientX - initialX; //set current x-cordinate to where it is now
currentY = e.clientY - initialY; //set current y-cordinate to where it is now
}
//Im not sure what this does but it dosnt work without it
xOffset = currentX;
yOffset = currentY;
setTranslate(currentX, currentY, dragItem);
}
}
function setTranslate(xPos, yPos, el) { //Im not sure what this does but it dosnt work without it
el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}
</script>
</body>
</html>我也上传了代码到TryIt为那些谁喜欢：https://www.w3schools.com/code/tryit.asp?filename=GCF4V2RIT7T4
1条答案
按热度按时间svujldwt1#
在这个版本中，你只能在红框内移动圆圈，我想你可以轻松地实现另一个框。