прокручивается внутри doppable DIV при перетаскивании рядом с нижним

Question

У меня есть несколько перетаскиваемых div внутри прокручиваемого div. Когда я перетаскиваю их в раскрывающуюся зону (которая также является прокручиваемым div), doppable DIV не прокручивается вниз. Просто страница движется. Как сказать, что только отбрасываемый div должен прокручиваться при перетаскивании?

Вот мой текущий код JQuery для изготовления дивы перетаскиваемым

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

Answer 1

Использование "overflow=auto" это работает для меня.

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

ИЛИ

JQuery теперь поддерживает scrollTop в качестве переменной анимации.

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

Вам больше не нужно устанавливатьTimeout/setInterval для прокрутки плавно.

Answer 2

Я пришел с этим решением:

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