नीचे

Question

के पास खींचते समय एक डोपपेबल डीआईवी के अंदर स्क्रॉल करें मेरे पास स्क्रोल करने योग्य div के अंदर एकाधिक, ड्रैगगेबल divs हैं। जब मैं उन्हें ड्रॉपटेबल जोन (जो एक स्क्रोल करने योग्य div भी है) में खींचता है, तो डॉप करने योग्य डीआईवी नीचे स्क्रॉल नहीं करता है। बस पेज चल रहा है। कैसे कहें, ड्रैग करते समय बस ड्रॉप करने योग्य div को स्क्रॉल करना चाहिए?

यहाँ खींचने योग्य

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

Answer 1

उपयोग "overflow=auto" यह मेरे लिए काम करता divs बनाने के लिए मेरे वर्तमान jQuery कोड है।

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

या

jQuery अब एक एनीमेशन चर के रूप में scrollTop का समर्थन करता है।

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

आपको आसानी से स्क्रॉल करने के लिए टाइमआउट/सेट इंटरवल सेट करने की आवश्यकता नहीं है।

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