Ad

Html Div Dragging Visibility Not Able On Safari Browser

I am playing with a puzzle and I find out that when I am dragging the object to drop area object is not visible during the "dragging" process. On Chrome browser works smoothly.

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

one assumption was to change this line

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

and change into target.id , but it doesn't help.

Ad

Answer

The issue was caused by not using Drag effect attribute for drag event also the CSS you are using for #puz and #puzz had few attributes that makes the dragged HTML element go out of flow, I removed float:left and position:absolute from <i> tags CSS and #puz div and replaced them with a container <div> to center the elements, here is a working snippet along with a 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>

Ad
source: stackoverflow.com
Ad