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>J'espère avoir été suffisamment clair, et reste pendu à vos propositions.
Merci encore.