scrolle innerhalb eines doppelseitigen DIVs, während du am unteren Rand ziehst

Question

Ich habe mehrere ziehbare divs in einem scrollbaren div. Wenn ich sie in die Drop-in-Zone ziehe (die auch ein scrollbares div ist), scrollt das doppelseitige DIV nicht nach unten. Nur die Seite bewegt sich. Wie zu sagen, dass nur das Droppable Div Scrollen beim Ziehen?

Hier ist meine aktuellen jQuery-Code für die Herstellung der divs ziehbar

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

Answer 1

Use "overflow=auto" es funktioniert für mich.

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

OR

jQuery unterstützt nun scrollTop als Animation variabel.

Sie müssen nicht länger setTimeout/setInterval, um reibungslos zu scrollen.

Answer 2

kam ich mit dieser Lösung:

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