JQuery UI - 可放置位置

我尝试拖放一个div（.delivery），这是在另一个div（#newDeliveries）到另一个（#deliveriesByVehicle）。JQuery UI - 可放置位置

当我将.delivery放入#deliveriesByVehicle时，交付将自动置于#deliveriesByVehicle的右上角，然后将其移动到合适的位置。

当我垂.delivery（它与“TOUS LES公告”（源）和“Livraison相提并论VEHICULE”（目标）之间的文本的小盒子： When I drop

凡我.delivery之前放置移动对“Livraison相提并论VEHICULE”区域： Where my .delivery is placed

我用引导的主要布局（我需要有一些响应一点点），所以我认为这是一个CSS冲突，但即使我全部删除。 CSS，问题依然存在。

我发现的唯一解决方法是将revertDuration设置为0，但这不是我的解决方案。

需要注意的是，如果我使用可投放功能的“接受”参数（与恢复：“无效的”可拖动元素），我.delivery被放置在错误的地方...

这里，我调用该函数的DragDrop我可拖动的元素（进入Ajax调用，这就是为什么我需要一个外部功能）：

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

在这里，我的DragDrop功能：

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

在这里，我集合T他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'*/ 
});

来源

2014-05-06 Seto

请将答案放在答案中并接受它。 – isherwood

问题解决与另一个解决方法。我不知道为什么，但可拖动添加一个属性样式（内联）到我的元素：style = position：relative;顶= NNpx;左= NNpx;因此，在删除功能中，我删除了style属性并重新创建它，但仅限于位置：relative（必须具有拖动效果）

来源

2014-10-28 20:17:22 Seto

JQuery UI - 可放置位置

回答

相关问题