jquery - jQuery拖放到滚动div - 放置的元素不滚动

Question

我有一个滚动 div，其中包含许多 div 作为可拖动 div 的目标插槽。此插槽容器需要水平滚动才能看到所有目标插槽。

现在，当可拖动元素被拖到正确的槽中，并且槽容器滚动时，被拖放的元素不会在 div 中滚动。有没有办法让放置的 div 在插槽容器内滚动？

$('.draggable').draggable({
    stack: '#drag_container div',
    revert: true
});

$('.drop_target').droppable({
    accept: '#drag_container div',
    drop: handleDrop
});

function handleDrop(event, ui) { 
    var slot_number = $(this).data('number');
    var draggable_number = ui.draggable.data('number');

    if (slot_number == draggable_number) {
        ui.draggable.css('cursor', 'pointer');   
        ui.draggable.draggable('disable');

        $(this).droppable('disable');
        ui.draggable.position({ of: $(this), my: 'left top', at: 'left top'});
        ui.draggable.draggable('option', 'revert', false);
    }
}

请参阅http://jsfiddle.net/uZ8kN/7/上的小提琴

Answer 1

看到这个：

jsFiddle：http: //jsfiddle.net/Khursheed_Ali/uZ8kN/8/

替换：

ui.draggable.position({ of: $(this), my: 'left top', at: 'left top'});

和 ：

    $(this).append(ui.draggable);
    $(ui.draggable).css("position","relative");
    $(ui.draggable).css("top","0px");
    $(ui.draggable).css("left","0px"); 

Answer 2

在 if 语句 (slot_number == draggable_number) 之后添加：

ui.draggable.appendTo("#drop_container");