I have made a simple drag and drop game. I want to ensure the user cannot move the draggable elements outside of the bounds of the containing div (class="fill_in_the_gaps--container) either by touch or mouse movement. I do not want to use any libraries. How do I achieve this using vanilla javascript?
// //backend produces an array with answers
// const gapFillAnswers = ["goods & services","opportunities","water","sports car","tangible","intangible","entrepreneurs"];
const answerSpaces = document.querySelectorAll(".fill_in_the_gaps--answer_space");
const answerContainer = document.querySelector(".fill_in_the_gaps--answers_container")
const answerWords = document.querySelectorAll(".fill_in_the_gaps--answers");
answerContainer.addEventListener('drop',dropHandler);
answerContainer.addEventListener('dragover',dragOverHandler);
answerWords.forEach(element =>{
element.addEventListener('dragstart',dragStartHandler);
element.addEventListener('dragend',dragEndHandler);
})
answerSpaces.forEach(element =>{
element.addEventListener('drop',dropHandler);
element.addEventListener('dragover',dragOverHandler);
element.addEventListener('dragenter',dragEnterHandler);
element.addEventListener('dragleave',dragLeaveHandler);
})
function dropHandler(e){
//create a pointer to the original dragged element using the dataTransfer object this willl then be appended to the drop space
if(e.target.classList.contains("fill_in_the_gaps--answer_space")){
e.target.style.border = "none";
}
e.preventDefault();
const element_to_be_dropped = document.getElementById(e.dataTransfer.getData("text"))
e.target.append(element_to_be_dropped);
}
function dragOverHandler(e){
e.preventDefault();
}
function dragStartHandler(e){
e.target.style.opacity = "0.5";
e.dataTransfer.setData("text",e.target.getAttribute("id"));
}
function dragEndHandler(e){
e.target.style.opacity = "1";
}
function dragEnterHandler(e){
e.target.style.border = "2px dotted green";
}
function dragLeaveHandler(e){
e.target.style.border = "none";
}*{
box-sizing: border-box;
}
:root{
--blue: #000724;
--pink: #DC398D;
--yellow:#FEBD31;
--green:#36F906;
}
body{
background-color: var(--blue);
}
.fill_in_the_gaps--container{
padding: 1rem;
border-radius: 0.5rem;
border-color: var(--pink);
border-width: 5px;
border-style: solid;
background-color: whitesmoke;
}
.fill_in_the_gaps--answers_container{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
overflow-y: scroll;
padding: 1rem;
border:2px dotted gray;
}
.fill_in_the_gaps--answers{
display: inline-block;
white-space:nowrap;
margin-left: 15px;
margin-right: 15px;
}
.fill_in_the_gaps--answer_space{
display: inline-block;
background-color: var(--yellow);
width:8rem;
height: 1rem;
margin-top: 2px;
margin-left: 2px;
margin-right: 2px;;
text-align: center;
padding-bottom:2px;
vertical-align:middle;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src=".2.4/gsap.min.js" defer ></script>
<script src="app.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div data-board="aqa" data-level="gcse" data-subject="business" data-unit="1.1" data-type="fill_in_the_gaps" class="fill_in_the_gaps--container">
<p class="fill_in_the_gaps--main_text">
A business is an anisation that produces<span id="answer_space_0" class="fill_in_the_gaps--answer_space"></span>.Often businesses are setup to take advantage of business
<span id="answer_space_1" class="fill_in_the_gaps--answer_space"></span>. Many businessess sell items that people need, some businesses sell items that people want. An example of a need is
<span id="answer_space_2" class="fill_in_the_gaps--answer_space"></span>. An example of a want is a <span id="answer_space_3" class="fill_in_the_gaps--answer_space"></span>. Goods are an example of
<span id="answer_space_4" class="fill_in_the_gaps--answer_space"></span>items. Services are an example of <span id="answer_space_5" class="fill_in_the_gaps--answer_space"></span>items. People who start up a business are known as
<span id="answer_space_6" class="fill_in_the_gaps--answer_space"></span>their reward for taking a risk is profit.
</p>
<div class="fill_in_the_gaps--answers_container">
<span id="answer_0" draggable="true" class="fill_in_the_gaps--answers">goods & services</span>
<span id="answer_1" draggable="true" class="fill_in_the_gaps--answers">opportunities</span>
<span id="answer_2" draggable="true" class="fill_in_the_gaps--answers">water</span>
<span id="answer_3" draggable="true" class="fill_in_the_gaps--answers">sports car</span>
<span id="answer_4" draggable="true" class="fill_in_the_gaps--answers">tangible</span>
<span id="answer_5" draggable="true" class="fill_in_the_gaps--answers">intangible</span>
<span id="answer_6" draggable="true" class="fill_in_the_gaps--answers">entrepreneurs</span>
</div>
</div>
</body>
</html>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745048829a4608260.html
评论列表（0条）