javascript - 如何在拖放中使用 jquery 删除 css 属性

Question

我在 class box 和 id box1 中有四张图片，box2、box3 和 box4..

当我将图像拖放到 boxright1 时，图像没有正确地放到矩形中。

我已将 tried 添加到 #box(number) 的 disable property absolute 在拖放区域中，这样它就会变成矩形。 ...但是没有用。

我希望图像正确放置在矩形上

如何实现？

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>

Answer 1

您可以将位置更改为unset。它也应该是 $("#"+data) 因为 data 是一个变量$("#"+data).css("position","unset");

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");
   $("#"+data).css("position","unset");
  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>