html div перетаскивание видимости невозможно в браузере Safari - PullRequest
Новая
       23

html div перетаскивание видимости невозможно в браузере Safari

1 голос
/ 27 апреля 2020

Я играю с головоломкой и обнаруживаю, что при перетаскивании объекта в область перетаскивания объект не виден во время процесса «перетаскивания». На Chrome браузер работает плавно.

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

Одно из предположений состояло в том, чтобы изменить эту строку 

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

и изменить на target.id, но это не помогает.

1 Ответ

1 голос
/ 29 апреля 2020

Проблема была вызвана тем, что не использовался атрибут Drag для события перетаскивания , а также CSS, который вы используете для #puz и #puzz, имел мало атрибутов, которые делают вытащил HTML элемент go из потока, я удалил float:left и position:absolute из <i> тегов CSS и #puz div и заменил их контейнером <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>
...