मान लीजिए कि मेरे पास आईडी के साथ एक ड्रैग करने योग्य तत्व है #draggable। मेरे पास एक div भी है जिसमें id के साथ droppable divs की सूची है #list। लेकिन कंटेनर डिव ऊंचाई में सीमित है, इसलिए यह एक ही बार (ए, बी और सी) में केवल 3 droppable divs प्रदर्शित कर सकता है। उस कंटेनर div को सेट किया गया है overflow:scroll.
जब मैं "को ड्रैग कर रहा हूं तो स्क्रॉल करने के लिए मैं कंटेनर डिव को कैसे प्रबंधित कर सकता हूं #draggable इस पर तत्व? क्योंकि अभी मैं आखिरी ड्राप करने वाले तत्वों पर तत्व को छोड़ नहीं सकता हूं जो अतिप्रवाह (डी, ई, एफ, जी) द्वारा छिपे हुए हैं।
<span id="draggable">draggable</span>
<hr>
<div style="height:200px;overflow:scroll">
<ul id="list">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
</div>
इसके अलावा, यदि आप तत्व को छोड़ देते हैं तो आप ऐसा कर सकते हैं के अंतर्गत the overflow:scroll div, यह वास्तव में छिपा droppable divs पर बूंदें!
उन मुद्दों से कैसे निपटा जाए?
उत्तर:
उत्तर № 1 के लिए 1आप के लिए सबसे आसान समाधान के लिए कदम है #draggable div अंदर div साथ में overflow:scroll इस तरह से जुड़े:
<div style="height:200px;overflow:scroll">
<span id="draggable">draggable</span>
<hr/>
<ul id="list">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
</div>
अद्यतन फ़िडेल देखें: https://jsfiddle.net/matikucharski/v80kppez/2/