2013-11-28 130 views
2

我有一個滾動div包含一些divs作爲可拖動div的目標位置。此插槽容器需要水平滾動以查看所有目標插槽。jQuery拖放到滾動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/

+0

剛剛更新的小提琴http://jsfiddle.net/uZ8kN/7/ – IlludiumPu36

回答

2

見小提琴看到這個:

的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"); 
+0

純溶液(認爲我應該想到這一點的。 )。非常感謝! – IlludiumPu36

0

添加此之後如果語句(時隙號== draggable_number):

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