Jquery - Autosave drag and drop

Eléphant du PHP | 66 Messages

07 sept. 2015, 13:56

Bonjour,

Encore une fois, j'aurai besoin de votre aide.

J'utilise jquery et son drag and drop.

Je crée donc les box déplaçables (des clients) : "$createBox.="dragDropObj.addSource('".$donnees['index_resa']."-".$horaire."'',true,true,true,false,'onDragFunction');\n";
".
puis celles fixes qui peuvent accueillir les box (leur logement) : " $createBoxDrop.="dragDropObj.addTarget('logement".$donnees2['id']."','dropItems');";".

puis si des données avient déjà été intégrée, il y a le : " $position.="Move('".$correspondances['index_resa']."','logement".$correspondances['id_hebergement_client']."');";"

jusque là, tout marche nickel, et bien désolé si cela ne parle pas de premier abord, mais l'intérêt est que cela parle à ceux qui connaissent le drag and drop Jquery.

Ma question commence maintenant. Actuellement, pour sauvegarder tout cela, je dois cliquer sur un lien qui renvoi vers une fonction et qui reprend chaque box, et affecte sa valeur :

Code : Tout sélectionner

<script type="text/javascript"> function Move(idOfDraggedItem,targetId){ var obj=document.getElementById(idOfDraggedItem); var content=document.getElementById(targetId); content.appendChild(obj); } // Custom drop actions for <div id="dropBox"> and <div id="leftColumn"> function dropItems(idOfDraggedItem,targetId,x,y) { var obj=document.getElementById(idOfDraggedItem); var content=document.getElementById(targetId); content.appendChild(obj); } function onDragFunction(cloneId,origId) { self.status = 'Started dragging element with id ' + cloneId; var obj = document.getElementById(cloneId); obj.style.border='1px solid #F00'; } function Miseajourlogement(resa,logement){ var xhr = getXhr(); xhr.onreadystatechange = function() { if(xhr.readyState == 4 ) { leselect = xhr.responseText; document.getElementById('test')=leselect; } } xhr.open("POST","./ajax_maj_logement.php",false); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send("reservation="+escape(resa)+"&logement="+escape(logement)); } function sauvegarde() { var xhr = getXhr(); document.getElementById('message').innerHTML="<div align='center' style='color:red;'>Sauvegarde en cours...</div>"; xhr.onreadystatechange = function() { if(xhr.readyState == 4 ) { leselect = xhr.responseText; document.getElementById('test')=leselect; } } var parent=getElementsByClassName('dragableBox_logement'); for (i=0;i<parent.length;i++) { var listitems = parent[i].getElementsByTagName("div"); for (j=0;j<listitems.length;j++) { Miseajourlogement(listitems[j].id,parent[i].id); } } document.getElementById('message').innerHTML="<div align='center' style='border:1px solid black;background-color:#ccc;color:red;'>Sauvegarde effectuee</div>"; window.location.replace('index.php?page=changement_affectation'); return true; } function getElementsByClassName(className,elm,tag){ var testClass = new RegExp("(^|s)" + className + "(s|$)"); var tag = tag || "*"; var elm = elm || document; var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag); var returnElements = []; var current; var length = elements.length; for(var i=0; i<length; i++){ current = elements[i ]; if(testClass.test(current.className)){ returnElements.push(current); } } return returnElements; } function getXhr(){ var xhr = null; if(window.XMLHttpRequest) // Firefox et autres xhr = new XMLHttpRequest(); else if(window.ActiveXObject){ // Internet Explorer try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } } else { // XMLHttpRequest non supporté par le navigateur alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); xhr = false; } return xhr; } var dragDropObj = new DHTMLgoodies_dragDrop(); <?php echo $createBox; echo $createBoxDrop; echo $position; ?> // Set <div id="dropBox"> as a drop target. Call function dropItems on drop dragDropObj.addTarget('leftColumn','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop dragDropObj.init(); </script>
Je souhaiterais savoir si je peux automatiser la sauvegarde une fois que je déplace une box (le client) vers la box accueillante (son logement), afin d'éviter tout oubli de sauvegarde, et surtout d'éviter l'attente obligatoire parfois longue (15sec pour 75 clients et 75 logements chez moi) de la sauvegarde complète.

J'espère avoir été suffisamment clair, et reste pendu à vos propositions.

Merci encore.

Mammouth du PHP | 944 Messages

07 sept. 2015, 14:05

oui, tu peux appeler la fonction de sauvegarde à chaque déplacement.
si j'ai bien compris, tu fais 75 appels à une url lors de cette sauvegarde, cela irait bien plus vite de ne faire qu'un seul appel, qui contient les positions des 75 éléments.

Eléphant du PHP | 66 Messages

07 sept. 2015, 14:13

merci pour ta réponse, toutefois, 2 informations :
1- je cherche justement à savoir comment faire pour sauvegarder à chaque déplacement et faire un "sauvegarde(client, logement);" lors de ce déplacement car ..
2-lorsque je clique sur 'sauvegarder', cela lance la fonction 'sauvegarde();' et entraine automatiquement la sauvegarde (en mode UPDATE de mysql) mais traite obligatoirement toutes les infos, meme celles qui n'ont pas été modifiée, d'où la durée parfois longue.

Eléphant du PHP | 66 Messages

15 juin 2018, 01:02

Bonjour,

Je déterre un peu ce message pour faire une demande supplémentaire sur le même script.

En fait, cette fois-ci, j'aurai voulu savoir s'il était possible de générer un déplacement d'une box droppée vers sa place initiale, en faisant un double-clique dessus ?

Merci de votre aide. Stéphane.