Bonjour je suis actuellement en train de travailler sur un projet en commun. Le problème étant que je voudrais drag plusieurs elements de la page avec ce code Javascript là :

dragElement(document.getElementsById("item"));
const request = new XMLHttpRequest();

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    // if present, the header is where you move the DIV from:
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    // otherwise, move the DIV from anywhere inside the DIV:
    elmnt.onmousedown = dragMouseDown;
  }

Il fonctionne très bien quand il y a qu'1 seul élément qui porte l'id "item" mais quand il y en a plusieurs comme sur ce code HTML/php :

<?php 
                $itemlist = $bdd->query("SELECT COUNT(*) as id FROM item WHERE user_id = 13"); 
                $itemlists = $itemlist->fetch();
                $itemlist->closeCursor();
                for($i = 0; $i < $itemlists['id']; $i++)
					{
            ?>
            <div class="item" id="item" style="top: 169px; left: 45px;"> 
                <img class="item" src="assets/img/item/recyclebin.png">
                <p class="item">Recycle Bin</p>
            </div>
            <?php } ?>

ça ne fonctionne plus... Ayant peu de connaissance sur le sujet, pouvez-vous m'éclairer s'il vous plaît ?

Merci beaucoup

Hello,

Quand tu as plusieurs "item", ta variable "elmnt" devient un tableau.

Tu ne peux donc plus écrire "elmnt.id", mais il faudrait plutôt écrire "elmnt[i].id" dans une boucle avec i variant de 0 à la longueur de ton tableau elmnt.

Par contre, par définition un id est unique. Dans ce cas il faudrait plutôt tu donnes une class à tes balises. Et utiliser getElementByClass.

Comme tu as déjà une classe item, trouve un autre nom et tu peux donner 2 classes à une balise :

class="class1 class2"

Voilà je pense que ca devrait fonctionner mieux après ca

Et regarde aussi https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Bonjour, comme ça ?

dragElement(document.getElementsByClassName("dragitem"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  for(i = 0; i < elmnt: i++) {
    if (document.getElementsByClassName(elmnt[i].id + "header")) {
      // if present, the header is where you move the DIV from:
      document.getElementsByClassName(elmnt[i].id + "header").onmousedown = dragMouseDown;
    } else {
      // otherwise, move the DIV from anywhere inside the DIV:
      elmnt.onmousedown = dragMouseDown;
    }
  }

La syntaxe semble correcte. Utilise des console.log pour vérifier que c'est bien tes id qui sont contenus dans elemnt[x].id

Je pense que le problème vient de ton drag.

Qu'est ce que tu veux faire exactement ? Du drag & drop ? Juste pour y glisser sans ordre ou avec ordre des choses ? 

Sans ordre, aide toi du cours openclassrooms, je crois qu'il s'appelle dynamiser vos pages web avec JS. Il y a un chapitre dédié au drag&drop. (en jquery je crois)

Si ton but c'est d'ordonner tes items, la classe Sortable devrait t'interesser ! Google it !

Ce que je voudrais c'est drag des éléments sur la page comme sur un bureau Windows/iOS/Linux et autre bref.. Et ce que je dis c'est que quand il y a qu'un seul élément avec l'id "item" on peut bien le drag, ça fonctionne très bien. Mais quand il y en a plusieurs tout se fige.

J'ai donc changé le getElementById par un getElementsByClassName. J'ai créé un for. Ajouté [i] dans chaque variables mais toujours rien...

Et bien je t'ai donné une réponse.

J'ai voulu faire pareil que toi et j'ai utilisé le script Sortable pour simplifier les choses.