Jquery UI - Droppable position

Question

J'essaie de faire glisser un div (.delivery), qui est dans un autre div (#newDeliveries) dans un autre (#deliveriesByVehicle). Lorsque je dépose ma .delivery dans #deliveriesByVehicle, la .delivery est automatiquement placée dans le coin supérieur droit du #deliveriesByVehicle avant de le déplacer au bon endroit.

Là où je laisse tomber mon .delivery (c'est la petite boîte avec le texte entre "tous les bulletins" (source) et "par vehicle Livraison" (cible): When I drop

Où est placé mon .delivery avant se déplacer sur la zone « Livraison par vehicle »: Where my .delivery is placed

J'utilise bootstrap pour la mise en page principale (je dois avoir quelque chose d'un peu sensible), donc je pensais que c'était un conflit CSS Mais même si je supprimer tous. CSS, le problème persiste

La seule solution de contournement que j'ai trouvée est de mettre la revertDuration à 0, mais ce n'est pas une solution pour moi.

Notez que si j'utilise le « accepter » paramètre de la fonction largable (avec un revert: « invalide » pour l'élément draggable), mon .delivery est placé au mauvais endroit ...

Ici, J'appelle la fonction dragDrop à mon élément draggable (dans un appel Ajax, c'est la raison pour laquelle j'ai besoin d'une fonction externe):

(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); 

ici, ma fonction dragDrop:

function dragDrop(element){ 
element.draggable({ 
    revert: true  
}); 

ici, je mets t Les diviseurs droppables:

$('#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

Problème résolu avec une autre solution de contournement. Je ne sais pas pourquoi, mais draggable ajoute un style d'attribut (inline) dans mes éléments: style = position: relative; haut = NNpx; gauche = NNpx; Donc, dans la fonction drop, je supprime l'attribut style et le recréer, mais seulement avec la position: relative (qui est obligatoire pour avoir l'effet drag'n'drop)