Jquery UI - Droppable position - jquery-ui

Question

I try to drag'n'drop a div (.delivery), which is in another div (#newDeliveries) into another (#deliveriesByVehicle).
When I drop my .delivery into #deliveriesByVehicle, the .delivery is automatically placed on the right top corner of the #deliveriesByVehicle before moves it on the good place.
Where I drop my .delivery (it's the little box with the text between "tous les bulletins" (source) and "Livraison par véhicule" (target) :
When I drop
Where my .delivery is placed before move on the "Livraison par véhicule" area :
Where my .delivery is placed
I use bootstrap for the main layout (I need to have something a little bit responsive), so I thought it was a CSS conflict. But even if I delete ALL the CSS, the problem persist.
The only workaround I have found is to set the revertDuration to 0, but it's not a solution to me.
Note that if I use the 'accept' parameter of the droppable function (with a revert : 'invalid' for the draggable element), my .delivery is placed at the wrong place...
Here, I call the function dragDrop to my draggable element (into an Ajax call, it's why I need an external function) :
(function( $ ){
$.fn.ajaxGetDeliveriesByVhc = function() {
if($('#ListVehicle').val() == 'empty')
{
$('#vehicleSelectionLoad').html('Veuillez sélectionner un véhicule.');
$('#deliveriesByVehicle').empty();
return false;
}
//The value is valide, we launch the treatment
$('#vehicleSelectionLoad').html('<img src="' + loader + '" alt="#" /> Chargement...');
var idVehicle = $('#ListVehicle').val();
var deliveryDay = $('#datePicker').attr('dateUS');
$.ajax(
{
url: Routing.generate('vehicleSelection', {idVehicle : idVehicle, deliveryDay : deliveryDay}),
type: 'GET',
dataType: 'json',
error: function(jqXHR, textStatus, errorThrown)
{
// En cas d'erreur, on le signale
$('#vehicleSelectionLoad').html('<div class="error">Une erreur est survenue lors de la requête. '+ textStatus+' ' +errorThrown+ ' ' +jqXHR+ '</div>');
},
success: function(deliveries, textStatus, jqXHR)
{
// Succes. On affiche un message de confirmation
$('#vehicleSelectionLoad').empty();
$('#deliveriesByVehicle').empty();
if(deliveries.length > 0)
{
$.each(deliveries,function(n){
$('#deliveriesByVehicle').append('<div class="delivery" deliveryId='+deliveries[n].id+'>'+ deliveries[n].customerName +'<br/>'
+ deliveries[n].customerZip + ' ' + deliveries[n].customerCity + '<br/>'
+ deliveries[n].deliveryNote +'</div>');
dragDrop($('.delivery[deliveryId='+deliveries[n].id+']'));
});
}
else
{
$('#deliveriesByVehicle').append('Aucun bulletin attribué à ce véhicule pour ce jour');
}
}
});
return this;
};
})( jQuery );
Here, my dragDrop function :
function dragDrop(element){
element.draggable({
revert: true
});
Here, I set the droppables div :
$('#areaNewDeliveries').droppable({
drop : function(event, ui){
ui.draggable.appendTo($('#newDeliveries'));
},
activeClass : 'dragVisible',
hoverClass : 'dragActive',
tolerance : 'pointer'/*,
accept : '.delivery'*/
});
$('#areaDeliveriesByVehicle').droppable({
drop : function(event, ui){
ui.draggable.appendTo($('#deliveriesByVehicle'));
},
activeClass : 'dragVisible',
hoverClass : 'dragActive',
tolerance : 'pointer'/*,
accept : '.delivery'*/
});

Answer 1

Problem solve with another workaround. I don't know why, but draggable add an attribute style (inline) into my elements : style=position:relative; top=NNpx; left=NNpx; So, in the drop function, I remove the style attribute and recreate it, but only with the position:relative (which is mandatory to have the drag'n'drop effect)