[html div拖动可见性无法在Safari浏览器中使用

Question

bounty到期在7天内。该问题的答案有资格获得+ 50声望赏金。BinaryTie希望引起更多关注对此问题：

这是浏览器问题吗？如果是，如何解决？

我在玩拼图，发现在“拖动”过程中将对象拖动到放置区域时，该对象不可见。在Chrome浏览器上可以正常运行。

https://jsfiddle.net/hehehe2/wk5pzfx1/

一个假设是要更改此行

ev.dataTransfer.setData("text", ev.target.className); 

并更改为target.id，但没有帮助。

Answer 1

此问题是由于未将Drag effect的drag event属性使用同样，您用于#puz和#puzz的CSS的属性很少，导致拖动的HTML元素不再可用，我从float:left标签CSS和position:absolute div中删除了<i>和#puz并替换了它们带有容器<div>以使元素居中，这是一个有效的代码段以及jsfiddle：

function color() {
        let root = document.documentElement
        root.style.setProperty('--color', "hsl("+Math.floor(Math.random()*360)+"deg,50%,50%)");  
      }
      color()

      function allowDrop(ev) {
        ev.preventDefault();
      }

      function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.className);
        ev.effectAllowed = "copyMove";
      }

      function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text")
        
        if(ev.target.className == data){
          ev.target.classList.add('dropped')
          document.querySelector('.'+data+"[draggable='true']").classList.add('done')
          
          if(document.querySelectorAll('.dropped').length == 3) {
            document.querySelector('#puz').style.border = 'none'  
            document.querySelector('#puz').style.animation = 'allDone 1s linear forwards'  
            
            setTimeout(function(){
              document.body.innerHTML = "<div class='container'><div id='puz'>  <i class='first' ondrop='drop(event)' ondragover='allowDrop(event)'></i>  <i class='secon' ondrop='drop(event)' ondragover='allowDrop(event)'></i>  <i class='third' ondrop='drop(event)' ondragover='allowDrop(event)'></i></div><div id='puzz'>  <i class='third' draggable='true' ondragstart='drag(event)'></i>  <i class='first' draggable='true' ondragstart='drag(event)'></i>  <i class='secon' draggable='true' ondragstart='drag(event)'></i></div></div>";
              color()
            },1500)
          }    
        }  
      }

:root {
  --color:tomato;
  --height:75px;
  --border-radius:35px;
/*   turn on below for image based version */
/*   --image:url('https://media.gettyimages.com/vectors/hot-dog-dachshund-puppy-vector-id895877422?s=2048x2048'); */
}

#puz, #puzz {
  /*position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);*/
  width:300px;
  height:var(--height);
  border-radius:var(--border-radius);
  border:3px dashed lightgray;  
  white-space:nowrap;
  user-select:none;
}
#puzz {
  /*transform:translate(-50%,100%);*/
  border:0;
}

#puz i {
  display: inline-block;
  width:100px;
  height:var(--height);
}

#puzz i {
  display:inline-block;
  width:100px;
  height:var(--height);
  background:var(--color);
  background-image:var(--image);
  background-size:300px 300px;
  cursor:move;
}
.first {
  border-top-left-radius:var(--border-radius);
  border-bottom-left-radius:var(--border-radius);
  background-position:left center !important;
}
.secon {
  background-position:center center !important;
}
.third {
  border-top-right-radius:var(--border-radius);
  border-bottom-right-radius:var(--border-radius);
  background-position:right center !important;
}

.dropped {
  background:var(--color);
  background-image:var(--image);
  background-size:300px 300px;
}
.done {
  opacity:0;
  pointer-events:none;
}

@keyframes allDone {
  50% { transform: scale(1.2); }
}
.container {
  width: 300px;
  height: 400px;
  margin: 100px auto;
}

<div class="container">
  <div id='puz'>
    <i class='first' ondrop='drop(event)' ondragover='allowDrop(event)'></i>
    <i class='secon' ondrop='drop(event)' ondragover='allowDrop(event)'></i>
    <i class='third' ondrop='drop(event)' ondragover='allowDrop(event)'></i>
  </div>
  <div id='puzz'>
    <i class='third' draggable='true' ondragstart='drag(event)'></i>
    <i class='first' draggable='true' ondragstart='drag(event)'></i>
    <i class='secon' draggable='true' ondragstart='drag(event)'></i>
  </div>
</div>