Jquery UI - Droppable position

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)