specify position of images on dropped area using nth child in javascript

问题: In my code, I have four images inside class box having id box1, box2, box3 and box4.. each image can be dragged and dropped to rectangle below.. my problem is when i...

问题:

In my code,

I have four images inside class box having id box1, box2, box3 and box4..

each image can be dragged and dropped to rectangle below..

my problem is when i try to position it on the dropped area using nth child in css it is not working

im not able to figure where is the mistake happenining in css?

How to position images on dropped area using nth child..? How to solve 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).css("position", "unset");
ev.target.appendChild(document.getElementById(data));
}
body{
background-repeat: no-repeat;
background-size: cover;
width:100%;
height:100%;
overflow: hidden;
background-size: 100vw 100vh;
}
#box1 {
position: absolute;
top: 28.3vh;
left: -10.98vw;
cursor: pointer;
border: 1px solid #0066CC;
background-repeat: no-repeat;
background-size: contain;
}
#box1 p {
width: 10.0vw;
height: 10.0vh;
border-radius: 25%;
}
#box2 {
position: absolute;
top: 13.7vh;
left: -10.98vw;
cursor:pointer;
border:1px solid #0066CC;
background-repeat:no-repeat;
background-size: contain;
}
#box2 p {
width: 5.0vw;
height: 5.0vh;
border-radius: 25%;
}
#box3 {
position: absolute;
top: 7.7vh;
left: 43.98vw;
cursor:pointer;
border:1px solid #0066CC;
background-size: contain;
background-repeat:no-repeat
}
#box3 p {
width: 7.0vw;
height: 7.0vh;
border-radius: 25%;
}
#box4 {
position: absolute;
top: 28.3vh;
left: 40.98vw;
cursor:pointer;
border:1px solid #0066CC;
background-repeat:no-repeat;
background-size:cover;
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;
background-size: cover;
background-repeat:no-repeat;
color: #0066ff;
text-shadow: 0px 0px 0px #999, 0px 0px 0px #888, 0px 0px 0px #777, 0px 0px 0px #6066, 0px 2px 0px #555, 0px 0px 0px #444, 0px 0px 0px #333, 0px 0px 0px #001135;
font:'ChunkFiveRegular';
}
.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; 
}
.boxright1 .box{
position: absolute;
}
.boxright1 .box:nth-child(1) {
top: 0px;
left: 155px;
}
.boxright1 .box:nth-child(2) {
top: 5px;
left:215px;
}
.boxright1 .box:nth-child(3) {
top: 0px;
left: 315px;
}
.boxright1 .box:nth-child(4) {
top: 5px;
left: 415px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>applying nth child to Class boxright1 not working</p>

<div class="container2">
<div class="containerr">
    <div class="pic" id="content">
        <div id="container">

            <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>
</div>
</div>

<div class="boxright1" ondrop="drop(event)" ondragover="allowDrop(event)" id="4" name="d"></div>


回答1:

The first problem is that you set the position of the dropped boxes to unset in the drop routine, which causes the boxes to no longer be positioned. Remove that line.

The second problem is one of specificity. You target the id, for instance #box1 at first, and the browser will keep the styles defined for that, no matter if you try to override them with .boxright1 .box:nth-child(...).

The solution is not to use ids for the original selector, but, say, class names. In the below solution, I have added box1 etc. to the classes for the boxes, so you can target them with .box1 rather than #box1 and then the .boxright1 .box:nth-child(...) selector will override that.

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).css("position", "unset");*/
  ev.target.appendChild(document.getElementById(data));
}
body {
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-size: 100vw 100vh;
}

.box1 {
  position: absolute;
  top: 28.3vh;
  left: -10.98vw;
  cursor: pointer;
  border: 1px solid #0066CC;
  background-repeat: no-repeat;
  background-size: contain;
}

.box1 p {
  width: 10.0vw;
  height: 10.0vh;
  border-radius: 25%;
}

.box2 {
  position: absolute;
  top: 13.7vh;
  left: -10.98vw;
  cursor: pointer;
  border: 1px solid #0066CC;
  background-repeat: no-repeat;
  background-size: contain;
}

.box2 p {
  width: 5.0vw;
  height: 5.0vh;
  border-radius: 25%;
}

.box3 {
  position: absolute;
  top: 7.7vh;
  left: 43.98vw;
  cursor: pointer;
  border: 1px solid #0066CC;
  background-size: contain;
  background-repeat: no-repeat
}

.box3 p {
  width: 7.0vw;
  height: 7.0vh;
  border-radius: 25%;
}

.box4 {
  position: absolute;
  top: 28.3vh;
  left: 40.98vw;
  cursor: pointer;
  border: 1px solid #0066CC;
  background-repeat: no-repeat;
  background-size: cover;
  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;
  background-size: cover;
  background-repeat: no-repeat;
  color: #0066ff;
  text-shadow: 0px 0px 0px #999, 0px 0px 0px #888, 0px 0px 0px #777, 0px 0px 0px #6066, 0px 2px 0px #555, 0px 0px 0px #444, 0px 0px 0px #333, 0px 0px 0px #001135;
  font: 'ChunkFiveRegular';
}

.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;
}

.boxright1 .box {
  position: absolute;
}

.boxright1 .box:nth-child(1) {
  top: 0px;
  left: 155px;
}

.boxright1 .box:nth-child(2) {
  top: 5px;
  left: 215px;
}

.boxright1 .box:nth-child(3) {
  top: 0px;
  left: 315px;
}

.boxright1 .box:nth-child(4) {
  top: 5px;
  left: 415px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>applying nth child to Class boxright1 not working</p>

<div class="container2">
  <div class="containerr">
    <div class="pic" id="content">
      <div id="container">

        <div class="box box1" 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 box2" 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 box3" 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 box4" 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>
  </div>
</div>

<div class="boxright1" ondrop="drop(event)" ondragover="allowDrop(event)" id="4" name="d"></div>

  • 发表于 2019-01-08 09:44
  • 阅读 ( 195 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除