Draggable gets disabled after dropped
Hi,
i'm having a small issue after dropping my draggables in defined zone.
Here's all the code to manage draggables and droppables:
- $(".dragAndDrop").each(function(e){
$(this).draggable({
//stack: {group: '#draggables div.dragAndDrop', min : 1},
snap: '.dropZone', snapMode: 'inner',
handle: '.poignee',
revert: 'invalid',
addClasses: false,
start: function(event, ui) {
},
drag: function() {
},
stop: function() {}
});
});
//On initialise l'array, qui sera, une fois complet, passé en param à la requete d'enregistrement et de reorganisation du fichier
var nbIntitulesCible = $(".dragAndDrop").length;
var tableauAssociatif = new Array(nbIntitulesCible);
$(".droppable").each(function(e){
var id = $(this).attr("id");
$(this).droppable({
over: function(event, ui) {
hoverClass: 'colonneActive',
//TODO : optimisation de ce bout de code, suis sur qu'il y a plus simple
//En hover, on illumine la colonne concernée
$("#fichierInput tbody tr").each(function(){
var i = -1;
$(this).find("td").each(function(){
i++;
if (i==id){
$(this).addClass("colonneActive");
}
});
});
},
drop: function(event, ui) {
//on insere proprement le draggable dans la dropZone du droppable
var dropZone = $(this).find(".dropZone");
var libelle = $(ui.draggable).text();
libelle = jQuery.trim(libelle);
var idEtiquette = $(ui.draggable).attr("id");
var droppableEnCours = $(this);
var idDroppable = $(this).attr("id");
//On associe l'id du droppable (cible) à celui du draggable (source)
insertInArray(tableauAssociatif,idEtiquette,idDroppable);
if ($(ui.draggable).width()>$(dropZone).width()){
$(dropZone).animate({
width: $(ui.draggable).width()+5
}, 400);
}
$("#fichierInput tbody tr td").each(function(){
$(this).removeClass("colonneActive");
});
},
out: function(event, ui) {
$("#fichierInput tbody tr td").each(function(){
$(this).removeClass("colonneActive");
});
}
});
});
Each of my droppables is contained in a TD like here :
- <table id="fichierInput">
<thead>
<tr>
<th id="0" class="droppable ui-droppable">
<div class="dropZone"></div>
REFERENCE
</th>
<th id="1" class="droppable ui-droppable">
<div class="dropZone"></div>
ID_INDIVIDU
</th>
<th id="2" class="droppable ui-droppable">
<div class="dropZone"></div>
DATE_CONTRAT
</th>
<th id="3" class="droppable ui-droppable">
<div class="dropZone"></div>
VENTE
</th>
<th id="4" class="droppable ui-droppable">
<div class="dropZone"></div>
NO_SEM
</th>
<th id="5" class="droppable ui-droppable">
<div class="dropZone"></div>
DATE_CONTRAT
</th>
<th id="6" class="droppable ui-droppable">
<div class="dropZone"></div>
VENTE
</th>
</tr>
</thead>
What I can't figure out is :
- Why my draggables get disabled after being dropped?
- If there is a way to append my dropped draggable to it's container (ie .dropZone) without loosing it's draggable properties and/or at least disable it's positioning properties while contained in .dropZone ?
Thanks for the help team