Background (Parent element), Drag and Drop div-CodePudding

I found a function to move an element from one div to another, but this function for some reason, when I go to drag the element it "grabs" the background color of the div it came from while I move it from one to another, I would like to know which function or what I need to correct so that when I drag the image it becomes transparent

var dragStart = function(e){
  //e.target.style.backgroundColor = "blue"; -> debug
}
var dragEnd = function(e){
  var areas = document.querySelectorAll(".area"); 
  //console.log(areas) -> debug
  
  
  if (e.target.id != ''){
    target = e.target
  }
  else{
    target = e.target.parentNode
    for(let temp of [1,2,3,4]){
      target = target.parentNode
    }
  }
    for(var area of areas){
      if((e.clientX > area.getBoundingClientRect().x &&
          e.clientX < area.getBoundingClientRect().x  area.clientWidth ) &&
            (e.clientY > area.getBoundingClientRect().y &&
            e.clientY  < area.getBoundingClientRect().y  area.clientHeight)){

          if(area.childElementCount == 0){
            area.appendChild(document.getElementById(target.id));
          }
          if(area.childElementCount == 1){
            aux = area.firstElementChild;
            target.parentElement.appendChild(document.getElementById(aux.id));
            area.appendChild(document.getElementById(target.id));
            break;
          }


      }
    }
  
  //e.target.style.backgroundColor = "red"; -> debug

}

document.addEventListener("dragstart" , dragStart);
document.addEventListener("dragend" ,   dragEnd);

<div id="square"  style="background-color: #ffdeba; padding: 0; width:90px; height:90px;">

<div id="piece" draggable=true style="background-image: url('https://www.pngall.com/wp-content/uploads/5/Black-Dog-PNG.png');background-size: 60%; background-position: center;
  background-repeat: no-repeat; width: 100%; height:100%"></div>

</div>



<div id="square"  style="background-color: red; padding: 0; width:90px; height:90px;">


</div>

CodePudding user response：

HTML5 draggable clips the part of view containing the target. It's like taking a screenshot and cropping the part where the target element is located. A quick fix is to remove the background of the parent for 1 milisecond.

var dragStart = function (e) {
  e.target.parentElement.classList.add('active');
  setTimeout(() => {
    e.target.parentElement.classList.remove('active');
  }, 1);
  //e.target.style.backgroundColor = "blue"; -> debug
};
var dragEnd = function (e) {
  var areas = document.querySelectorAll('.area');
  //console.log(areas) -> debug

  if (e.target.id != '') {
    target = e.target;
  } else {
    target = e.target.parentNode;
    for (let temp of [1, 2, 3, 4]) {
      target = target.parentNode;
    }
  }
  for (var area of areas) {
    if (
      e.clientX > area.getBoundingClientRect().x &&
      e.clientX < area.getBoundingClientRect().x   area.clientWidth &&
      e.clientY > area.getBoundingClientRect().y &&
      e.clientY < area.getBoundingClientRect().y   area.clientHeight
    ) {
      if (area.childElementCount == 0) {
        area.appendChild(document.getElementById(target.id));
      }
      if (area.childElementCount == 1) {
        aux = area.firstElementChild;
        target.parentElement.appendChild(document.getElementById(aux.id));
        area.appendChild(document.getElementById(target.id));
        break;
      }
    }
  }

  //e.target.style.backgroundColor = "red"; -> debug
};

document.addEventListener('dragstart', dragStart);
document.addEventListener('dragend', dragEnd);

#piece {
  background-image: url('https://www.pngall.com/wp-content/uploads/5/Black-Dog-PNG.png');
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
#square1{background-color: #ffdeba; padding: 0; width:90px; height:90px;}
#square2{background-color: red; padding: 0; width:90px; height:90px;}
.area.active{
  background-color: transparent !important;
}

    <div
      id="square1"
      
      style=""
    >
      <div id="piece" draggable="true"></div>
    </div>

    <div
      id="square2"
      
      style=""
    ></div>

And don't use the same id for multiple elements. ID (as the name suggests) is unique.