Question

我试图将另一个div（#newDeliveries）中的div（.delivery）拖放到另一个div（#deliveriesByVehicle）中。

当我将.delivery放入#deliveriesByVehicle时，.delivery会自动放在＃define2Vehicle的右上角，然后将它移到好地方。

我放弃了我的.delivery（这是带有“tous les bulletins”（来源）和“Livraisonparvéhicule”（目标）之间文字的小方框： When I drop

在移动“Livraisonparvéhicule”区域之前放置我的.delivery： Where my .delivery is placed

我使用bootstrap作为主要布局（我需要一些响应），所以我认为这是一个CSS冲突。但即使我删除所有CSS，问题仍然存在。

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

请注意，如果我使用droppable函数的'accept'参数（对于可拖动元素使用revert：'invalid'），我的.delivery放在错误的位置......

在这里，我将函数dragDrop调用到我的draggable元素（进入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    
});

在这里，我设置了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

问题解决另一种解决方法。我不知道为什么，但是draggable在我的元素中添加了一个属性样式（内联）：style = position：relative;顶= NNpx;左= NNpx;因此，在drop函数中，我删除了style属性并重新创建它，但只有位置：relative（必须具有drag'n'drop效果）

Jquery UI - Droppable位置

1 个答案: