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"
],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>