質問

I have a scrolling div containing a number of divs as target slots for draggable divs. This slots container needs to be scrolled horizontally to see all the target slots.

Now when the draggable elements are dragged into their correct slots, and the slots container is scrolled, the dropped elements don't scroll in the div. Is there a way to have the dropped divs scroll inside the slots container?

$('.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);
    }
}

See fiddle at http://jsfiddle.net/uZ8kN/7/

役に立ちましたか?

解決

See this :

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

Replaced :

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

With :

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

他のヒント

add this after if statement (slot_number == draggable_number) :

ui.draggable.appendTo("#drop_container");
ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top