HTML 5 перетаскивание не работает на экране мобильного телефона - PullRequest
Новая
       8

HTML 5 перетаскивание не работает на экране мобильного телефона

0 голосов
/ 28 сентября 2018

Я создаю сценарий, в котором я хочу компонент перетаскивания,

, и я нашел один после некоторой работы, которая выглядит следующим образом 

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

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    let target = ev.target;
    let btnsHolder = document.getElementById("buttonsHolder")
    let currentBtn;
    var data = ev.dataTransfer.getData("text");

    //check if there's already a button inside
    if (target.children.length > 0){
      currentBtn = target.children[0];
      btnsHolder.appendChild(currentBtn);
    }

    target.appendChild(document.getElementById(data));    
}
#div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="buttonsHolder">
  <button id="test" draggable="true" ondragstart="drag(event)" width="336" height="69">button 1</button>
  <button id="test2" draggable="true" ondragstart="drag(event)" width="336" height="69">button 2</button>
  <button id="test3" draggable="true" ondragstart="drag(event)" width="336" height="69">button 3</button>
</div>

, нопроблема с тем же кодом:

он работает на ПК, но не на экране мобильного телефона,

для тестирования,

после нажатия

F12

нажатие на панель инструментов переключающего устройства активирует мобильное представление,

и тот же код не работает,

в чем здесь может быть проблема?

1 Ответ

0 голосов
/ 28 сентября 2018

Некоторые мобильные устройства не слушают событие drag.Чтобы решить это, вы должны использовать сенсорное событие touchstart, touchend, touchcancel, touchleave, touchmove TouchEvent - веб-API 

// get The element on which to attach the event 
var btn = document.querySelector('.btn');

// attaching each event listener
btn.addEventListener('touchstart', function(){
	console.log('btn touched');
})
btn.addEventListener('touchend', function(){
	console.log('btn leaved');
})
btn.addEventListener('touchmove', function(){
	console.log('btn leaved');
})
btn.addEventListener('touchleave', function(){
	console.log('btn moving end');
})
btn.addEventListener('touchcancel', function(){
	console.log('btn moving cancel');
})
<button class="btn">test</button>
...