Jquery UI - 可放置位置答案

【问题标题】：Jquery UI - Droppable positionJquery UI - 可放置位置
【发布时间】：2014-05-06 20:56:22
【问题描述】：

我尝试将位于另一个 div (#newDeliveries) 中的 div (.delivery) 拖放到另一个 (#deliveriesByVehicle) 中。

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

我将 .delivery 放在哪里（它是一个小盒子，文本位于“tous les bulletins”（来源）和“Livraison par véhicule”（目标）之间： When I drop

在移动到“Livraison par véhicule”区域之前，我的 .delivery 放置在哪里： Where my .delivery is placed

我在主布局中使用引导程序（我需要一些响应性的东西），所以我认为这是 CSS 冲突。但即使我删除所有 CSS，问题仍然存在。

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

请注意，如果我使用 droppable 函数的 'accept' 参数（对可拖动元素使用 revert : 'invalid'），我的 .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 );

这里，我的拖放功能：

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'*/
});

【问题讨论】：

标签： jquery-ui position draggable droppable

【解决方案1】：

使用另一种解决方法解决问题。我不知道为什么，但是可以将属性样式（内联）添加到我的元素中： style=position:relative;顶部=NNpx；左=NNpx；因此，在 drop 函数中，我删除了 style 属性并重新创建它，但仅使用 position:relative （必须具有拖放效果）

【讨论】：