Jquery UI, interchangé balise droppable et draggable
Bonjour,
Voila je rencontre un petit problème avec mon code.
J'ai deux balise, dans un calendrier, l'une est droppable, l'autre est draggable. Quand je pose ma draggable sur ma droppable, le but est de modifier une partie de l'id du parent des deux div. Ensuite, je supprime tout les enfants des deux divs parents et je reconstruit dans chacune des divs, les élèments inverses, et donc, la div précédemment droppable devient draggable et vice versa.
$(document).ready(function(){
$("div[id^='OQP']").draggable({
helper:'clone'
});
$("div[id^='DIS']").droppable({
tolerance:'pointer',
drop:function(event,ui){
idOqpComplet = $(ui.draggable).attr('id');
enteteOqp = idOqpComplet.split("_")[0];//OQPMAT ou OQPAM
idOqp = idOqpComplet.split("_")[1];//16464
enfantOqp = $(ui.draggable).children().attr('id');
htmlEnfantOqp = $(ui.draggable).children().html();
enteteEnfantOqp1 = enfantOqp.split("_")[0];
enteteEnfantOqp2 = enfantOqp.split("_")[1];
enteteEnfantOqpMoment3 = enfantOqp.split("_")[2];
enteteEnfantOqpNumero4 = enfantOqp.split("_")[3];
idLibreComplet =$(this).attr('id');
enteteLibre =idLibreComplet.split("_")[0];//DISPO
idLibre =idLibreComplet.split("_")[1];//18489
momentLibre =idLibreComplet.split("_")[2];//MAT ou AM
enfantLibre =$(this).children().attr('id');
enteteEnfantLibre1 =enfantLibre.split("_")[0];
enteteEnfantLibre2 =enfantLibre.split("_")[1];
numeroEnfantLibre =enfantLibre.split("_")[2];
htmlEnfantLibre =$(this).children().html();
//enteteLibreCache = 'DISPOCACHE';
$('#'+idLibreComplet).children().remove();
$('#'+idOqpComplet).children().remove();
$('#'+idOqpComplet ).draggable( "destroy");
$('#'+idLibreComplet ).droppable( "destroy");
// $('#'+idLibreComplet ).droppable( "destroy" );
$('#'+idOqpComplet).attr("id", enteteLibre+'_'+idOqp+'_'+momentLibre);
$('#'+idLibreComplet).attr("id", enteteOqp+'_'+idLibre);
idOqpComplet=enteteLibre+'_'+idOqp+'_'+momentLibre; //DISPO_444_mat
idLibreComplet=enteteOqp+'_'+idLibre; // OQPMAT_55555
// $('#'+idLibreComplet).remove();
// $('#'+idOqpComplet).remove();
$('#'+idLibreComplet).draggable({disabled:false, helper:'clone',});
$("div[id^='DIS']").droppable({disabled:false});
// $('#'+idLibreComplet).draggable("enable");
//$('#'+idOqpComplet).droppable();
$('#'+idLibreComplet).append('<div id="'+enteteEnfantOqp1+'_'+enteteEnfantOqp2+'_'+enteteEnfantOqpMoment3+'_'+numeroEnfantLibre+'" role="alert" class="alert alert-warning">'+htmlEnfantOqp+'</div>');
if(momentLibre.indexOf("am")==0)
{
$('#'+idLibreComplet).append('<button type="button" class="btn btn-warning" onClick="modifResa(\'am_\','+numeroEnfantLibre+')" >Modifier</button>');
$('#'+idLibreComplet).append('<button type="button" class="btn btn-danger matin" onClick="annulResa(\'am_\','+numeroEnfantLibre+')" >Annuler</button>');
}
else
{
$('#'+idLibreComplet).append('<button type="button" class="btn btn-warning" onClick="modifResa(\'mat_\','+numeroEnfantLibre+')" >Modifier</button>');
$('#'+idLibreComplet).append('<button type="button" class="btn btn-danger matin" onClick="annulResa(\'mat_\','+numeroEnfantLibre+')" >Annuler</button>');
}
if(enteteEnfantOqpMoment3.indexOf("am")==0)
{
$('#'+idOqpComplet).append('<button id="'+enteteEnfantLibre1+'_'+idOqp+'" type="button" onClick="createResa(\'am_\','+idOqp+')" role="alert" class="btn btn-primary" >'+htmlEnfantLibre+'</button>');
}
else
{
$('#'+idOqpComplet).append('<button id="'+enteteEnfantLibre1+'_'+idOqp+'" type="button" onClick="createResa(\'mat_\','+idOqp+')" role="alert" class="btn btn-primary" droppable="true" >'+htmlEnfantLibre+'</button>');
}
$('#'+enteteEnfantLibre1+'_'+idOqp).droppable({disabled:false, tolerance:'pointer'});
}
});
});
Comme le montre mon screen shot si joint, j'arrive à rendre draggable la div précemment droppable mais impossible de rendre doppable la div précédemment draggable. Cela fait maintenant 4 jours que je me tire les cheveux à comprendre le pourquoi du comment mais rien n'y fait.
Voici le screen shot explicatif.
En 1) la div qui entoure réservé (la noire) est droppable et la rose est draggable.
En 2) la je drag n drop de la rose à la noire et les éléments s'inversent bien
En 3) je peux encore drag ma nouvelle "réservé par" mais impossible de drop sur le nouveau "réservé" (nouvel élément droppable) (ni avec ma nouvelle draggable, ni avec les anciens draggables)
3 réponses
Finalement, j'ai créé une balise "mère" pour chaque div comprenant mes boutons.
Je ne détruis plus ce qu'il y avait dedans, je ne fais simplement que mouvoir les éléments d'une balise mère à une autre.
On a plus besoin de gèrer le comportement étant donné qu'à présent, une balise est dropable ou non en fonction de son nom.
Voici le code pour les intéréssés.
Pour ceux n'ayant pas compris, il permet de faire du drag N drop entre différentes div.
La spécificité étant que, en fonction de leurs emplacements, la div peut soit ne plus être draggable ou soit ne plus recevoir.
Idéal pour un calendrier de réservation par exemple, permettant de déplacer des plages horraires déjà réservé sur une autre plage horraire (en tant qu'administrateur).
var source;
var source_type1;
var source_type2;
var source_id;
var source_id_parent;
var source_moment;
var destination;
var destination_type1;
var destination_type2;
var destination_id;
var destination_id_parent;
var destination_moment;
var source_texte;
var source_boutton_modifie;
var source_boutton_annule;
var destination_parent_moment
var source_parent_id
var source_parent_moment
var destination_parent_id
$(document).ready(function(){
$("div[id^='BOL']").draggable({
helper:'clone',
start:function(event,ui){
source = $(this).attr('id');
source_id_parent = $(this).parent().attr('id');
source_moment=source_id_parent.split("_")[0];
source_id=source_id_parent.split("_")[1];
}
});
$("div[id^='BAL']").droppable({
tolerance:'pointer',
//revert:"valid",
drop:function(event,ui){
destination = $(this).attr('id');
destination_id_parent = $(this).parent().attr('id');
destination_moment=destination_id_parent.split("_")[0];
destination_id=destination_id_parent.split("_")[1];
$(this).children("#BAL_R").attr("onClick", "alert('bienvenue chez nous le matin"+source_id+source_moment+"' )");
alert(source);
$('#'+source).children("#BOL_Ann").attr("onClick", "alert('Annuler"+destination_id+destination_moment+"' )");
$('#'+source).children("#BOL_Mod").attr("onClick", "alert('Modifier"+destination_id+destination_moment+"' )");
$('#'+source_id_parent).append($('#'+destination));
$('#'+destination_id_parent).append($('#'+source));
if(destination_moment=="mat")
{
$('#'+destination).attr("id","BOL_M_"+source_id);
}
else {
$('#'+destination).attr("id","BOL_A_"+source_id);
}
$('#'+destination_id_parent).attr("id", destination_moment+'_'+source_id);
$('#'+source_id_parent).attr("id", source_moment+'_'+destination_id);
}
});
});
C'est violent ton idée à comprendre :). Pene à bien détruire le précédent comportement avant de rerajouter un draggable et dropable.
C'est déjà fait grâce au destroy =) C'est incompréhensible, mais je planche sur une autre solution, je partagerai la solution.
Il semble qu'il y ai des interractions avec le jquery mais la flemme de se plonger dans le code source, je n'ai pas trouvé quelqu'un avec le même problème, et je me suis aller faire voire sur stack ^^