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 - 可放置位置

回答

相關問題