I have four pictures within a box, each with the individual IDs of box1, box2, box3, and box4.
Despite my efforts, when I attempt to drag and drop the pictures into boxright1, they do not land correctly inside the designated rectangle.
I attempted to use the disable property absolute on #box(number) in the dropped area to ensure proper placement within the rectangle... but unfortunately, this method was unsuccessful.
My objective is to successfully drop the images onto the rectangle as intended
What steps should I take to accomplish this?
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
console.log(data);
$("#data").removeAttr("position");
ev.target.appendChild(document.getElementById(data));
}#box1 {
position: absolute;
top: 25.3vh;
left: -10.98vw;
background-repeat: no-repeat;
background-size: contain;
}
#box1 p {
width: 10.0vw;
height: 10.0vh;
border-radius: 25%;
}
#box2 {
position: absolute;
top: 4.7vh;
left: -10.98vw;
cursor:pointer;
border:px solid #0066CC;
background-repeat:no-repeat;
background-size: contain;
}
#box2 p {
width: 5.0vw;
height: 5.0vh;
border-radius: 25%;
}
#box3 {
position: absolute;
top: 2.7vh;
left: 43.98vw;
background-size: contain;
background-repeat:no-repeat;
}
#box3 p {
width: 7.0vw;
height: 7.0vh;
border-radius: 25%;
}
#box4 {
position: absolute;
top: 27.3vh;
left: 40.98vw;
background-repeat:no-repeat;
background-size: contain;
}
#box4 p {
width: 10.0vw;
height: 10.0vh;
border-radius: 25%;
}
.container2 {
width: 50.1vw;
position: fixed;
top: 10.5vh;
left: 30.5vw;
}
.boxright1 p {
font-size: calc(2vw);
height: 4vh;
margin: 0;
color: white;
}
.boxright1 {
position: absolute;
top: 65.3vh;
left: 17.5vw;
width: 61.0vw;
height: 35.0vh;
cursor:pointer;
border:2px solid black;
background-repeat:no-repeat;
background-size: contain;
background-image:url(images/name%20board%20witout%20rope2.png);
background-size: 40vw 55vh;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>not able to drop correctly on the rectangle:</p>
<div class="container2">
<div class="box" id="box1" draggable="true" ondragstart="drag(event)" style="background-image:url(https://picsum.photos/200/300)">
<p name="values" id="name1" class="hidden"></p>
</div>
<div class="box" id="box2" draggable="true" ondragstart="drag(event)" style="background-image:url(https://picsum.photos/g/200/300)">
<p name="values" id="name2" class="hidden"></p>
</div>
<div class="box" id="box3" draggable="true" ondragstart="drag(event)" style="background-image:url(https://picsum.photos/200/300?image=0)">
<p name="values" id="name3" class="hidden"></p>
</div>
<div class="box" id="box4" draggable="true" ondragstart="drag(event)" style="background-image:url(https://picsum.photos/200/300/?gravity=east)">
<p name="values" id="name4" class="hidden"></p>
</div>
</div>
<div class="boxright1" ondrop="drop(event)" ondragover="allowDrop(event)" id="4" name="d"></div>