Malheureusement, je n'ai pas d'appareil avec iOS12 (mon appareil ne le prend pas en charge) et je ne peux pas le tester. Et je ne sais pas pourquoi le support iOS / Apple écrit qu'il prend en charge ces événements dans iOS 11.2 et sur votre nouvel appareil, il n'est pas pris en charge.

Solution alternative

Avec ceci solution de contournement, vous obtiendrez une solution pour tous les appareils et navigateurs modernes. Il vaut mieux attendre le support d'iOS / Apple.

dragstart , dragover , dragleave , Les événements drop ne fonctionnent pas sur tous les appareils tactiles.

Vous devez utiliser les noms d'événements appropriés pour vos événements tactiles, comme:

• touchstart
• touchend
• touchcancel
• touchmove

Lisez la documentation a > à propos de cet événement.

Afin de fournir un support de qualité pour les interfaces utilisateur tactiles, les événements tactiles offrent la possibilité d'interpréter l'activité du doigt (ou du stylet) sur les écrans tactiles ou les trackpads.

Les interfaces d'événements tactiles sont des API de niveau relativement bas qui peuvent être utilisées pour prendre en charge des interactions multi-touch spécifiques à une application, comme un geste à deux doigts. Une interaction multi-touch commence lorsqu'un doigt (ou un stylet) touche pour la première fois la surface de contact. D'autres doigts peuvent ensuite toucher la surface et éventuellement se déplacer sur la surface tactile. L'interaction se termine lorsque les doigts sont retirés de la surface. Au cours de cette interaction, une application reçoit des événements tactiles pendant les phases de début, de déplacement et de fin.

Les événements tactiles sont similaires aux événements de souris, sauf qu'ils prennent en charge les touches simultanées et à différents endroits sur la surface tactile. L'interface TouchEvent encapsule tous les points de contact actuellement actifs. L'interface tactile, qui représente un point de contact unique, comprend des informations telles que la position du point de contact par rapport à la fenêtre du navigateur.

Malheureusement, les événements touchenter et touchleave ont été supprimés de la spécification et pour cette raison, si vous en avez besoin, vous devez écrire une solution de contournement en utilisant document.elementFromPoint () comme suit:

document.addEventListener('touchmove', function(e)
{
    var touch = e.touches[0],
        elementFromPoint = document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset);

    if(elem == elementFromPoint) //elem is your element which was entered
    {
        //your code for touchenter event
    }
    else //the code for touchleave event
});

Peut-être que pour certains autres appareils mobiles et leurs navigateurs, vous devrez peut-être utiliser des polyfills ( 1 , 2 ) qui permettent la prise en charge du glisser-déposer HTML5 sur les appareils mobiles (tactiles).

J'ai forké votre cas de test codepen ici: https://codepen.io/bobacus/pen/MLjZMg

Je me demandais si les écouteurs devaient être ajoutés aux éléments

<script src="http://bernardo-castilho.github.io/DragDropTouch/DragDropTouch.js"></script>

Mais cela n'a pas fonctionné.

J'ai essayé plusieurs choses différentes, mais ce qui a finalement réussi à le faire fonctionner dans Safari a été d'ajouter un polyfill décrit ici: https://www.codeproject.com/Articles/1091766/Add- support-for-standard-HTML-Drag-and-Drop-operat

J'ai ajouté ceci en haut de l'extrait de code HTML:

listEl = document.getElementById('my_list');
for (var i = 0; i < listEl.children.length; i ++) {
    itemEl = listEl.children[i];
    itemEl.addEventListener('dragstart', function(event) {
      dragging = getLI(event.target);
      if (dragging) {
          event.dataTransfer.setData('text/plain', null);
          event.dataTransfer.setDragImage(dragging, 0, 0);
      }
    });
}

J'espère que cela vous sera utile.

J'ai fait beaucoup de recherches au cours de la semaine dernière sur ce sujet, et j'ai fait beaucoup de tests et de débogages. Ce que j'ai découvert, c'est que iOS prend en charge les événements de glissement, mais iOS ne les déclenche pas. (À partir d'iOS 12)

Si vous testez une page Web sur iOS Safari, vous verrez que tous les éléments HTML ont ondragstart attaché à leur prototype. Les événements de traînée sont tous là. Ils ne sont tout simplement jamais déclenchés.

D'autres ont également rencontré ce problème. Event Modernizer ne détecte pas la prise en charge du glisser-déposer à cause de cette fausse prise en charge.

De plus, j'ai parcouru la documentation Safari et a trouvé ceci :

iOS Remarque: bien que le glisser-déposer ne soit pas pris en charge, vous pouvez produire ...

Il dit "pris en charge", mais juste en dessous, il y a un tableau d'événements, qui montre glisser et dit que ce n'est pas "généré".

Cela signifie que caniuse est actuellement erroné et doit être mis à jour.

Réponse directe à la question

Le code ne fonctionne pas uniquement parce qu'Apple a choisi de ne pas faire glisser les événements.