Drag and drop avec organisation du contenu

-
Bonjour,

Je réalise un système de newsletter avec possibilité de modifier mes blocs (divs) et rajouter des nouveaux modules par drag and drop (glisser-déposer).
Ce que je souhaiterais faire c'est de réorganiser mes blocs par drag and drop et ensuite enregistrer la modification et pouvoir récupérer cette réorganisation à l'étape suivante.

J'ai réussi à déplacer mes élément par glisser-déposer pour les positionner là ou je veux. Mon problème je n'ai pas réussi à sauvegarder la modification. Mes blocs sont affichés en dur et je récupère l'ordre de ma réorganisation grâce une fonction qui crée une chaîne séparée par un point-virgule avec les ID de mes blocs à glisser : 'item1,item3,item2,item5,item4'. Donc la partie drad and drop marche très bien, c'est juste la partie sauvegarde qui me bloque. Est-ce qu'il faut que tous mes blocs soient récupérés dynamiquement pour pouvoir enregistrer ma réorganisation ?

Merci par avance !


<!-- HTML -->
<div id="container">
<div id="dragableBox">
<div class="bigItem" dragableBox="true" id="item1">
<h4>Item 1</h4>
<p>Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus: eosque ut heiulans baiolorum praecentor ad expediendum quod orsi sunt incitans vocibus crebris. qui haut longe postea ideo vivus exustus est.</p>
</div>
<div class="smallItem" dragableBox="true" id="item2">
<h4>Item 2</h4>
<p>Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus: eosque ut heiulans baiolorum praecentor ad expediendum quod orsi sunt incitans vocibus crebris. qui haut longe postea ideo vivus exustus est.</p>
</div>
<div class="smallItem" dragableBox="true" id="item3">
<h4>Item 3</h4>
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast.</p>
</div>
<div class="bigItem" dragableBox="true" id="item4">
<h4>Item 4</h4>
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast ipsius et altea�ra per purum simulacra ferunturet feriunt oculos turbantia composituras.</p>
</div>
<div class="smallItem" dragableBox="true" id="item5">
<h4>Item 5</h4>
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast.</p>
</div>
</div>
<form action="" method="post" id="save_reorder">
<input type="submit" value="Sauvegarder" id="submit">
<input type="hidden" name="button" value="">
</form>
</div>


// JS
$(document).ready(function(){
function saveData(){
var which = this.value;
var saveString = which = "";
var dragableObjectArray = new Array();

for(var no=0;no<dragableObjectArray.length;no++){
if(saveString.length>0)saveString = saveString + ';';
ref = dragableObjectArray[no];
saveString = saveString + ref['obj'].id;
}
$('[name="button"]').val(saveString);

return false;
}
$('#submit').on('click', saveData);
});
Afficher la suite 

Votre réponse

3 réponses

Messages postés
23647
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 décembre 2018
0
Merci
Bonjour,

Tu dis :
Mon problème je n'ai pas réussi à sauvegarder la modification

En quoi l'enregistrement ne fonctionne t'il pas ?
Quel est le code correspondant à l'enregistrement.(le code php) ?


c'est juste la partie sauvegarde qui me bloque. Est-ce qu'il faut que tous mes blocs soient récupérés dynamiquement pour pouvoir enregistrer ma réorganisation ?

Pour l’enregistrent .. non ... mais pour l'affichage Oui !
Il faut bien faire en sorte que tu ré affiches tes blocs en fonction de l'ordre que tu as enregistré ....

Commenter la réponse de jordane45
0
Merci
Merci d'avoir pris le temps de me répondre.
Je n'ai pas encore fait le code php parce que je ne dais pas comment procéder dans ce cas de figure. Je peux enregistrer dans une table quelconque ce que me renvoie la fonction : saveData() que je récupère dans l'input de type hidden. Mais je n'ai pas une table correspondant à l'enregistrement de mes blocs pour la lier (jointure). D’où ma question : Est-ce qu'il faut que tous mes blocs soient affichés dynamiquement pour pouvoir ensuite enregistrer ma réorganisation ? Ou bien y-a-t-il un moyen de le faire sans avoir besoin d'enregistrer tous mes blocs en base de données ? Mes blocs n'ont pas la même structure html c-à-d que les contenus html sont différents d'un bloc à un autre. Je ne peux pas faire de boucle quand il s'agit de les afficher dynamiquement.
J'espère que je suis claire.

Cdlt,
Commenter la réponse de Utilisateur anonyme
0
Merci
Bonjour,

J'ai modifier mon code de cette manière mais et je sauvegarde l'ordre.
Mais le souci dès que j'actualise ma page l'ordre disparaît. Merci pour votre aide !


<!-- HTML -->
<div class="container">
<div class="block" data-id="1">
<h4>Heading 1</h4>
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast ipsius et altea�ra per purum simulacra ferunturet feriunt oculos turbantia composituras.</p>
</div>
<div class="block" data-id="2">
<h4>Heading 2</h4>
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast.</p>
</div>
<div class="block" data-id="3">
<h4>Heading 3</h4>
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast.</p>
</div>
<div class="block" data-id="4">
<h4>Heading 4</h4>
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast ipsius et altea�ra per purum simulacra ferunturet feriunt oculos turbantia composituras.</p>
</div>
<div class="block" data-id="5">
<h4>Heading 5</h4>
<p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast.</p>
</div>
<div id="nscrol">
<a id="dnd" class="bouton2">update</a>
<a id="cancel" class="bouton2 cacher">back</a>
<a id="reset" class="bouton3 cacher">reset</a>
<a id="record" class="bouton cacher">save</a>
</div>
</div>



$(document).ready(function(){
$('#nscrol').on('click','#dnd',function(e){
e.preventDefault();
$(this).fadeOut('slow',function(){
$(this).siblings().fadeIn('slow').css("display", "inline-block");
});
// ajoute la propriété pour le drop et le transfert de données
$.event.props.push('dataTransfer');
$('.block').attr('draggable',true).css('outline','1px solid green').find('*').attr('draggable',false);
var i, dragged, class_name;
var traitement = false;
$('.block').on({
dragstart:function(e){
if(!traitement){
dragged = $(this);
i = dragged.index();
class_name = dragged.attr('class');
dragged.css('opacity', '0.5');
e.dataTransfer.setData('text/html',dragged.html());
}
},
dragenter:function(e){
e.preventDefault();
},
dragleave:function(){
},
dragover:function(e){
e.preventDefault();
},
drop:function(e){
var dropzone = $(this);
if(typeof(dropzone)=='undefined'||dropzone.get(0)==dragged.get(0)){
e.preventDefault();
return false;
}
if(!traitement){
var data = e.dataTransfer.getData('text/html');
if(dropzone.index()<=i){
dropzone.before(dragged);
}else{
dropzone.after(dragged);
}
}
},
dragend:function(){
$(this).css('opacity','1');
},
click:function(e){
e.preventDefault();
}
});
}).on('click','#cancel',function(){
$('.block').off().css('outline','none');
$('[draggable]').removeAttr('draggable');
$('#dnd').siblings().fadeOut('slow', function(){
$('#dnd').fadeIn('slow');
});
}).on('click','#record',function(){
var len = $('.block').length;
var ordre = [];
var me = $(this);
for(var j=0;j<len;j++){
ordre.push({id:$('.entree_block').eq(j).data("id"),rang:$('.entree_block').eq(j).index('.entree_block')});
}
$.ajax({
type: "POST",
url: window.location.origin+"/news/orderUpdate.php",
data: {ordre:JSON.stringify(ordre)},
beforeSend:function(){
var img = '<img id="load" src="'+window.location.origin+'/news/iconLoading.gif" style="height:22px;margin-left:15px;margin-right:118px;vertical-align:middle;">';
($('#msg').length)?$('#msg').replaceWith(img):me.after(img);
},
success:function(){
$('#load').replaceWith('<b id="msg" style="margin-left:5px;">Changements enregistrés.</b>');
}
});
}).on('click','#reset',function(){
$.ajax({
type: "POST",
url: window.location.origin+"//orderUpdate.php",
data: {reset:true},
success:function(){
window.location.reload();
}
});
});
});



// orderUpdate.php
require_once('db.php');

$ordre = isset($_REQUEST['ordre'])?$_REQUEST['ordre']:'';
$reset = isset($_REQUEST['reset'])?$_REQUEST['reset']:'';

if (!empty($ordre)){
// Décode le JSON
$json_data = json_decode($ordre);

foreach($json_data as $v){
$code_id = $v->id;
$rang = $v->rang;

$q = array('code'=>$code_id, 'rand'=>$rang);
$sql = 'INSERT INTO ordre (code_id, rand) VALUES (:code, :rand)';
$req = $db->prepare($sql);
$req->execute($q) or die(print_r($req->errorInfo()));
}
} elseif (!empty($reset)){
$q = array('code'=>$code_id);
$sql = 'DELETE FROM tbl_module_ordre WHERE code_id = :code';
$req = $db->prepare($sql);
$req->execute($q) or die(print_r($req->errorInfo()));
}
Commenter la réponse de Utilisateur anonyme

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.