html div在Safari浏览器上无法拖动可见性

Question

我正在玩一个谜题，我发现当我将对象拖动到放置区域时，在“拖动”过程中对象不可见。在 Chrome 浏览器上运行流畅。

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

一个假设是改变这条线

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

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

Answer 1

这个问题是由于没有为drag event 使用Drag effect 属性引起的 同样，您用于#puz 和#puzz 的CSS 几乎没有使拖动的HTML 元素失去流动的属性，我从<i> 标签CSS 和#puz div 中删除了float:left 和position:absolute 并替换他们用一个容器<div> 将元素居中，这是一个工作的sn-p 以及一个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>