scorrere all'interno di un DIV Doppable mentre si trascina verso il basso

Question

Ho div più trascinabili all'interno di un div scorrevole. Quando li trascino nella zona droppable (che è anche un div scorrevole), il DIV doppable non scorre verso il basso. Solo la pagina si sta muovendo. Come dire che solo il div che può essere trascinato deve scorrere mentre si trascina?

Ecco il mio codice jQuery corrente per rendere il div trascinabili

$(".drag_item").draggable({ 
     helper: 'clone', 
     scroll: true, 
     drag: function(event, ui) { 
      $(this).css('z-index','100'); 
     } 
    }); 

Answer 1

Usa "overflow=auto" funziona per me.

<div style="overflow:auto;"></div> 

O

jQuery ora supporta scrollTop come variabile animazione.

$("#id").animate({"scrollTop": $("#id").scrollTop() + 100}); 

Non è più necessario impostare Timeout/setInterval per scorrere senza problemi.

Answer 2

mi si avvicinò con questa soluzione:

var direction = {}; 
var bound = {}; 
var scrolling = false; 
var container = document.getElementById("container"); 

$('#table-container') 
.on('dragstart', draggable, function(event, ui) { 
    bound = { 
    right : $(container).offset().left + $(container).width() - 50, 
    left : $(container).offset().left + 50, 
    top : $(container).offset().top + 50, 
    bottom : $(container).offset().top + $(container).height() - 50 
    }; 
}) 
.on('dragstop', draggable, function(event, ui) { 
    direction = {}; 
}) 
.on('drag', draggable, function(event, ui) { 
    direction.right = event.clientX - bound.right; 
    direction.left = bound.left - event.clientX; 
    direction.up = bound.top - event.clientY; 
    direction.down = event.clientY - bound.bottom; 

    if ((direction.right > 0 || direction.left > 0|| direction.up > 0 || direction.down > 0) && !scrolling) { 
    scroll(); 
    scrolling = true; 
    } else { 
    scrolling = false; 
    } 
}); 

function scroll() { 
    if (direction.right > 0) { 
    container.scrollLeft = container.scrollLeft + (direction.right >> 1); //dividing by 2 to soften effect 
    } 
    if (direction.left > 0) { 
    container.scrollLeft = container.scrollLeft - (direction.left >> 1); 
    } 
    if (direction.down > 0) { 
    container.scrollTop = container.scrollTop + (direction.down >> 1); 
    } 
    if (direction.up > 0) { 
    container.scrollTop = container.scrollTop - (direction.up >> 1); 
    } 

    if (direction.right > 0 || direction.left > 0 || direction.up > 0 || direction.down > 0) { 
    setTimeout(scroll, 100); 
    } 
}