Currently, I have two horizontal scrollers where I need to drag a div from the upper scroller to the lower scroller. While this functionality is working properly, there is an issue with the dragged div getting lost under the borders of the scroller during the drag process. The dragging functionality comes from the combination of jquery-UI and the smoothdivscroll plugin.
Is there a way to address this problem or should I consider starting over?
For reference, here is the link to the code on http://jsfiddle.net/yCESP/
List of jQuery plugins being used:
jquery-ui-1.10.4.custom.min.js
jquery.mousewheel.min.js
jquery.kinetic.min.js
jquery.smoothdivscroll-1.3-min.js
jquery.ui.touch-punch.min.js
Here is the HTML code snippet:
<div id="wrapper">
<div id="mainColumn" >
<div id="mixedContent2" >
<div class="koko_koira" style="background-color:#4254a3;color:white;">
<br/>
<p>1</p>
</div>
<!-- more content here -->
</div>
<div id="mixedContent" >
<div class="contentBox" style="background-color:#4254a3;color:white;">
<br/>
<p>FIRST</p>
</div>
<!-- more content here -->
</div>
</div>
</div>
And here is the CSS styling applied:
#wrapper {
z-index:0;
}
/* More CSS rules... */
#mixedCoontent .contentBox p {
font-size: 10px;
}
/* More CSS rules... */
Finally, the JavaScript/jQuery functions utilized are as follows:
$(document).ready(function() {
// Initialize smoothDivScroll for first container
});
$( ".koko_koira" ).draggable({
revert: "invalid",
helper: "clone",
cursor: "move",
});
$( ".contentBox" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});