CODEWITHSUNDEEP
jqueryjquery-uijquery-draggable
IlludiumPu36
IlludiumPu36

Reputation: 4304

jQuery drag and drop to scrolling div - dropped elements not scrolling

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/

Upvotes: 3

Views: 2881

Answers (2)

Ziad
Ziad

Reputation: 146

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

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

Upvotes: 0

SeeTheC
SeeTheC

Reputation: 1631

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");

Upvotes: 2

Related Questions