Faites glisser et déposez HTML5 pour déplacer un div n'importe où sur l'écran?

Question

Le titre est assez explicite.

Toutes les démos que j'ai trouvées consistent à déposer une div à un certain endroit. E.G une poubelle. Je dois faire un div glissable qui peut être déposé n'importe où sur l'écran.

Est-il possible de le faire avec HTML5? sinon comment dois-je le faire?

Answer 1

C'est vraiment simple:

1. Dans l'événement dragstart, calculez le décalage entre l'endroit où l'utilisateur a cliqué sur l'élément déplaçable et le coin supérieur gauche
2. Assurez-vous que l'événement dragover est appliqué à l'ensemble du document afin que l'élément puisse être déposé n'importe où
3. Dans l'événement drop, utilisez le décalage que vous avez calculé avec les clientX et clientY de la goutte pour savoir où positionner l'élément

En voici un I préparé plus tôt . Pour les points bonus, vous pouvez mettre à jour la position supérieure et gauche de l'élément dans événement de survol , ceci est utile si le bit que vous autorisez à faire glisser n'est pas l'élément entier à déplacer .