title: Jquery UI - Droppable position
body: <p>I try to drag'n'drop a div (.delivery), which is in another div (#newDeliveries) into another (#deliveriesByVehicle).</p>
  
  <p>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.</p>
  
  <p>Where I drop my .delivery (it's the little box with the text between "tous les bulletins" (source) and "Livraison par véhicule" (target) : 
  <a href="https://www.dropbox.com/s/hilha7xgm2vhr90/12.png" rel="nofollow">When I drop</a></p>
  
  <p>Where my .delivery is placed before move on the "Livraison par véhicule" area :
  <a href="https://www.dropbox.com/s/0k4vxjowxvxbyjf/22.png" rel="nofollow">Where my .delivery is placed</a></p>
  
  <p>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.</p>
  
  <p>The only workaround I have found is to set the revertDuration to 0, but it's not a solution to me. </p>
  
  <p>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...</p>
  
  <p>Here, I call the function dragDrop to my draggable element (into an Ajax call, it's why I need an external function) : </p>
  
  <pre><code>(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('&lt;img src="' + loader + '" alt="#" /&gt; 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('&lt;div class="error"&gt;Une erreur est survenue lors de la requête. '+ textStatus+' ' +errorThrown+ ' ' +jqXHR+ '&lt;/div&gt;');
              },
              success: function(deliveries, textStatus, jqXHR)
              {
                  // Succes. On affiche un message de confirmation
                  $('#vehicleSelectionLoad').empty();
                  $('#deliveriesByVehicle').empty();
                  if(deliveries.length &gt; 0)
                  {
                      $.each(deliveries,function(n){
                          $('#deliveriesByVehicle').append('&lt;div class="delivery" deliveryId='+deliveries[n].id+'&gt;'+ deliveries[n].customerName +'&lt;br/&gt;'
                              + deliveries[n].customerZip + ' ' + deliveries[n].customerCity + '&lt;br/&gt;'
                              + deliveries[n].deliveryNote +'&lt;/div&gt;');
                          dragDrop($('.delivery[deliveryId='+deliveries[n].id+']'));
                      });
  
                  }
                  else
                  {
                      $('#deliveriesByVehicle').append('Aucun bulletin attribué à ce véhicule pour ce jour');
                  }
  
              }
          });
          return this;
     }; 
  })( jQuery );
  </code></pre>
  
  <p>Here, my dragDrop function : </p>
  
  <pre><code>function dragDrop(element){
  element.draggable({
      revert: true    
  });
  </code></pre>
  
  <p>Here, I set the droppables div :</p>
  
  <pre><code>$('#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'*/
  });
  </code></pre>