11496 sujets

JavaScript, DOM et API Web HTML5

Drag and Drop, et Formulaire PHP

Bonjour à tous !

J'ai un petit soucis.

En HTML5 et Javascript j’effectue un Drag and Drop d'image. Par exemple, j'essaye de faire un polyvore. L'utilisateur prend l'objet qui lui plait, le glisse et valide à la prochaine étape.

Cependant j'ai quelque lacune, je n'arrive pas à récupérer la valeur de l'image dropé pour la passer ds mon formulaire, et sauvegardé l'image sélectionné durant l'étape.
Mon code de drag and drop, à étais inspiré du tuto qu'il y avait sur le Site du zero, mais avec leur nouvelle version je ne trouve plus l'url !

C'est surement un problème tout bête, mais je bute dessus...

Dans l'attente de vous lire...

 <body>
<div id="content">
<form method="????" action="page2.php">
<div id="drag">
  	<div id="allcup">
        <div id="cup" class="dropper">
        <img src="images/cup1.png" width="200" height="140" class="draggable" value="1" />
        </div>
        <div id="cup" class="dropper">
        <img src="images/cup2.png" width="200" height="140" class="draggable" value="2" />
        </div>
        <div id="cup" class="dropper">
        <img src="images/cup3.png" width="200" height="140" class="draggable" value="3" />
        </div>
        <div id="cup" class="dropper">
        <img src="images/cup4.png" width="200" height="140" class="draggable" value="4" />
        </div>
    </div>
    <div id="drop" class="dropper" name="drop"></div>
    <a href="etape1.php"><input type="button" class="annuler"  value=""/></a>
</div>
    <input type="submit" value="" class="suivant"/>
	</form>
</div>


</body>


 <script language="javascript" type="text/javascript">
(function() {
    
    var dndHandler = {
        
        draggedElement: null, // Propriété pointant vers l'élément en cours de déplacement
        
        applyDragEvents: function(element) {
            
            element.draggable = true;

            var dndHandler = this; // Cette variable est nécessaire pour que l'événement « dragstart » ci-dessous accède facilement au namespace « dndHandler »
            
            element.addEventListener('dragstart', function(e) {
                dndHandler.draggedElement = e.target; // On sauvegarde l'élément en cours de déplacement
                e.dataTransfer.setData('text/plain', ''); // Nécessaire pour Firefox
            }, false);
            
        },
 
        applyDropEvents: function(dropper) {
            
            dropper.addEventListener('dragover', function(e) {
                e.preventDefault(); // On autorise le drop d'éléments
                this.className = 'dropper drop_hover'; // Et on applique le style adéquat à notre zone de drop quand un élément la survole
            }, false);
            
            dropper.addEventListener('dragleave', function() {
                this.className = 'dropper'; // On revient au style de base lorsque l'élément quitte la zone de drop
            });
            
            var dndHandler = this; // Cette variable est nécessaire pour que l'événement « drop » ci-dessous accède facilement au namespace « dndHandler »

            dropper.addEventListener('drop', function(e) {

                var target = e.target,
                    draggedElement = dndHandler.draggedElement, // Récupération de l'élément concerné
                    clonedElement = draggedElement.cloneNode(true); // On créé immédiatement le clone de cet élément
                
                while(target.className.indexOf('dropper') == -1) { // Cette boucle permet de remonter jusqu'à la zone de drop parente
                    target = target.parentNode;
                }

                target.className = 'dropper'; // Application du style par défaut
                
                clonedElement = target.appendChild(clonedElement); // Ajout de l'élément cloné à la zone de drop actuelle
                dndHandler.applyDragEvents(clonedElement); // Nouvelle application des événements qui ont été perdus lors du cloneNode()
                
                draggedElement.parentNode.removeChild(draggedElement); // Suppression de l'élément d'origine

            });
            
        }
 
    };
    
    var elements = document.querySelectorAll('.draggable'),
        elementsLen = elements.length;
    
    for(var i = 0 ; i < elementsLen ; i++) {
        dndHandler.applyDragEvents(elements[i]); // Application des paramètres nécessaires aux éléments déplaçables
    }
    
    var droppers = document.querySelectorAll('.dropper'),
        droppersLen = droppers.length;
    
    for(var i = 0 ; i < droppersLen ; i++) {
        dndHandler.applyDropEvents(droppers[i]); // Application des événements nécessaires aux zones de drop
    }

})();

</script>
[/i][/i]
Modifié par Gangrene (18 Feb 2013 - 12:06)
Finalement en reprenant du début, j'ai réussi à faire ce que je voulais, je poste ma petite solution si ça peut aider quelqu'un un jour.

<!DOCTYPE html>
<html>
<head>
<title>Drag N Drop</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
div#mabox
{
width:100px;
height:100px;
display:block;
border:5px solid #FF0000;
}
</style>
<form action="page2.php" method="post">
<div id="mabox" name="mabox">Drop là morray</div>
<span id="box1"><img src="box1.png" alt="1"/></span>
<span id="box2"><img src="box2.png" alt="2"/></span>
<span id="box3"><img src="box3.png" alt="3"/></span>
<input type="hidden" id="test" name="test" value=""/>
<input type="submit" value="test" />
<a href="index.php"><input type="button" value="Annuler" /></a>
<form>
<script>
window.addEventListener('load',onload,false);
function onload(){
b1=document.getElementById('box1');
b2=document.getElementById('box2');
b3=document.getElementById('box3');
box=document.getElementById('mabox');
b1.addEventListener('dragstart',dragstart, false);
b2.addEventListener('dragstart',dragstart, false);
b3.addEventListener('dragstart',dragstart, false);
box.addEventListener('dragenter',function(e){e.preventDefault()}, false);
box.addEventListener('dragover',function(e){e.preventDefault()}, false);
box.addEventListener('drop',dropped, false);
}
function dragstart(e){
var value=e.currentTarget.innerHTML;
e.dataTransfer.setData('text',value);
}
function dropped(e){
e.preventDefault();
e.currentTarget.innerHTML= e.dataTransfer.getData('text');
var toto= $(this).children("img").attr("alt");
document.getElementById('test').value = toto; // [lol]
}
</script>
</body>
</html>



edit : le truk c'est que cela n'est pas tactile
Modifié par Gangrene (19 Feb 2013 - 11:20)
Sujet clos
Aller à