Drag-and-drop from div with scrollbars - overflow-y scroll VS overflow-x visible
<p>I've set up jQuery drag-and-drop from a div to another div and it works fine.</p>

<p>However, the source div sometimes exceeds the screen's height so I needed to add a vertical scrollbar to it. Here's where I run into trouble with the infamous overflow-y issue.</p>

<p>The div needs to have overflow-x: visible in order for the dragged elements to be visible as they are moved to the target div. But, when I add overflow-y: scroll or overflow-y: auto to the source div, suddenly overflow-x doesn't work anymore.</p>

<p>I have been to W3 and a few StackOverflow questions, and I realise this is not a bug but intended behavior (although WHY this was intended is beyond me). However, I haven't found a solution that works for me.</p>

<p>I've tried adding a wrapper div to the source div like some answers suggested, and then doing the following:</p>

<pre><code>.wrapper {
    width: 100px;
    position: absolute;
    top: 4vw;
    left: 0;
    bottom: 4vw;
    overflow-y: auto;
}

.source {
    position: relative;
    overflow: visible;
    z-index: 2;
}

&lt;div class="wrapper"&gt;
    &lt;div class="source"&gt;
        &lt;!-- draggable elements go here --&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="target"&gt;
    &lt;!-- draggable elements drop here --&gt;
&lt;/div&gt;
</code></pre>

<p>But, despite the source div's overflow being OK now, the wrapper still hides the horizontal overflow. I suppose I could increase the width of the wrapper to full screen and make the background invisible and make everything else on screen have a higher z-index in order to not be behind the wrapper, but that seems like a ridiculously bad solution for such a simple issue.</p>

<p>Can anyone help me here?</p>

<p>If a CSS solution isn't practical, can anyone offer some piece of Javascript that might resolve the problem?</p>

<p>Code sample: <a href="http://jsfiddle.net/9ush466w" rel="nofollow">jsfiddle</a></p>