drag and drop : récupérer les valeurs dans une autre page

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
atreides
Messages : 1
Enregistré le : 12 déc. 2020, 08:57

drag and drop : récupérer les valeurs dans une autre page

Message par atreides » 12 déc. 2020, 10:02

Bonjour,
je coince sur un problème de javascript dont je n'ai aucune formation mais j'aimerai pouvoir utiliser ce script et ainsi en comprendre le sens.

Mon soucis....
J'aimerai passer d'autres valeurs (id) sans pour autant qu'on les voyent dans le <li></li>, comment fait on cela ?

autre soucis, comment fait on pour récupérer chaque groupe(id) et les prénoms(id) de chaque groupe qui s'y attachent de javascript à php dans une autre page??

le résultat m'affiche ceci :

Code : Tout sélectionner

var data = {
	"groupe1": [
		"Vincent",
		"Yves"
	],
	"groupe2": [
		"Sébastien",
		"Julien"
	],
voici le fichier formulaire.html en question
Merci pour votre aide ;)

Code : Tout sélectionner

<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and drop</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d1859989">
<style>
html, body {
  position: relative;
  margin: 0 auto;
  padding: 0;
  max-width: 60em;
  font: 1em/1.5 Verdana,sans-serif;
}
h1, h2, h3 {
  color: #069;
  margin: .25em 0
}
section {
  display: block;
  margin: 0 .5em;
}
section p,
section pre {
  margin: 1em;
}
pre {
  font: inherit;
  border: 1px solid #ABC;
  padding: .5em;
  font-size: .8em;
}
code {
  white-space: pre-wrap;
}
.drag-over {
  background: #EEF;
}
.zone-groupe {
  display: flex;
  flex-wrap: wrap;
}
.zone-groupe > div {
  flex: 0 0 33.33%;
}
li {
  position: relative;
  display: block;
  margin: .25em;
  padding: .5em;
  border-radius: .25em;
  border: 1px dotted #999;
  list-style: none;
  background: #EEE;
}
button {
  font: inherit;
  padding: .25em 1em;
  cursor: pointer;
}
*[draggable=true] {
  cursor: move;
  -moz-user-select: none;
  -khtml-user-drag: element;
}
li[draggable=true]:hover {
  border-color: #333;
  background: #CDE;
}
.drop-zone {
  margin: 1em;
  padding: 0;
  min-height: 15em;
  min-width: 15em;
  border: 1px solid #ABC;
  font-size: .8em;
}
.liste-origine {
  display: flex;
  flex-wrap: wrap;
  min-height: auto;
}
.liste-origine li {
  width: 10em;
  margin: .25em;
  min-width: auto;
}
.btn-close {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1em;
  height: 1em;
  margin: .125em;
  padding: .125em;
  border: 2px solid currentColor;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  line-height: 1em;
  color: #BBB;
  transform: rotate(-45deg);
  cursor: pointer;
}
.btn-close:hover {
  color: #FFF;
  background: #F00;
}
.liste-origine .btn-close {
  display: none;
}
</style>
</head>
<body>
<main>
  <header>
    <h1>Drag and drop</h1>
  </header>
  <section>
    <h2>Liste noms</h2>
    <ul id="liste" class="drop-zone liste-origine">
      <li>Sébastien</li>
      <li>Yves</li>
      <li>Vincent</li>
      <li>Julien</li>
      <li>Louis</li>

    </ul>
 
    <div class="zone-groupe">
      <div >
        <h2>Groupe 1</h2>
        <ul class="drop-zone">
        </ul>
      </div>
      <div>
        <h2>Groupe 2</h2>
        <ul class="drop-zone">
        </ul>
      </div>
    </div>
  </section>
 
  <section>
    <h2>Résultat</h2>
				<form name="checkoutForm" method="post" action="req.php">
                <pre id="resultat"></pre>
				<input name="creation" type="submit" value="go" />
                </form>
  </section>
</main>
<script>
"use strict";
function getGroupes() {
  var prefixe = "groupe";
  var result = {};
  var oElems = document.querySelectorAll(".zone-groupe ul");
  var i;
 
  var oElem;
  var j;
  var tab;
 
  for (i = 0; oElems[i]; i += 1) {
    tab = [];
    oElem = oElems[i].children;
 
    for (j = 0; oElem[j]; j += 1) {
      tab.push(oElem[j].dataset.num);
    }
    result[prefixe + (i + 1)] = tab;
  }
  return result;
}
 
function showGroupes() {
  var data = getGroupes();
  var oDest = document.querySelector("#resultat");
  if (oDest) {
    oDest.textContent = "var data = " + JSON.stringify(data, null, "\t");
  }
}
 
function removeParent(elem) {
  var oParent = elem.parentNode;
  oParent.parentNode.removeChild(oParent);
  showGroupes();
}
 
//var typeData = "text/plain";  // normalement
var typeData = "Text"; // Text pour IE
function handleDragStart(e) {
  var idTemp = "drag-en-cours";
  this.id = idTemp;
  e.dataTransfer.setData(typeData, idTemp);
  e.dataTransfer.effectAllowed = "copy";
}
 
function handleDragEnter(e) {
  this.classList.add("drag-over");
  return false;
}
 
function handleDragOver(e) {
  e.preventDefault();
  this.classList.add("drag-over");
  e.dataTransfer.dropEffect = "copy";
  return false;
}
 
function handleDragLeave(e) {
  this.classList.remove("drag-over");
  return false;
}
 
function existeDeja(dest, num) {
  var i;
  var nb = dest.children.length;
  for (i = 0; i < nb; i += 1) {
    if (num === dest.children[i].dataset.num) {
      return true;
    }
  }
  return false;
}
 
function handleDrop(e) {
  if (e.stopPropagation) {
    e.stopPropagation();
    e.preventDefault();
  }
  var oDest = this;
  var elem = document.getElementById(e.dataTransfer.getData(typeData)); // Text pour IE
  elem.id = "";
 
  // on ne repose pas dans le même conteneur
  if (elem.parentNode !== oDest) {
//**    // si retour à liste d'origine
//**    var retour = oDest.classList.contains("liste-origine");
//**    if (retour) {
//**      elem.parentNode.removeChild(elem);
//**    }
//**    else {
//**      var existe = existeDeja(oDest, elem.dataset.num);
//**      if (!existe) {
//**        // clonage élément
//**        var clone = elem.cloneNode(true);
//**        //  ajout événement car les événements ne sont pas clonés
//**        clone.addEventListener("dragstart", handleDragStart, false);
//**        oDest.appendChild(clone);
        oDest.appendChild(elem);
//**      }
  }
  oDest.classList.remove("drag-over");
  showGroupes();
}
//autant dire qu'il ne reste que la sub
 
// initialisation des <li> drag-droppables
//**var htmlBtn = "<span class='btn-close' title='Supprimer' onclick='removeParent(this)'>x</span>";
var oElems = document.querySelectorAll(".drop-zone li");
var i;
var nb = oElems.length;
for (i = 0; i < nb; i += 1) {
  // autorise le drag
  oElems[i].setAttribute("draggable", "true");
  // ajout événement pour drag
  oElems[i].addEventListener("dragstart", handleDragStart, false);
  // ajout d'un marqueur
  oElems[i].dataset.num = oElems[i].textContent;
  // méthode « bourrin » d'ajout d'un bouton de suppression
//**  oElems[i].insertAdjacentHTML("beforeend", htmlBtn);
}
 
// initialisation des zones de drop
oElems = document.querySelectorAll(".drop-zone");
nb = oElems.length;
for (i = 0; i < nb; i += 1) {
  oElems[i].addEventListener("dragenter", handleDragEnter, false);
  oElems[i].addEventListener("dragover", handleDragOver, false);
  oElems[i].addEventListener("dragleave", handleDragLeave, false);
  oElems[i].addEventListener("drop", handleDrop, false);
}
showGroupes();
</script>
</body>
</html>

Répondre