Jqueryui draggable in dropzone will not scroll, reverts back, scroll bars are present

Question

On my main page I have 2 divs, both in fixed postition. the first div is the 'dropzone', and the second div contains multiple draggable divs.

in my fiddle, I've omitted code intentionally to keep it cleaner and short, but the code removed does not affect my problem

I can drag all the draggables without issue and confirm the expected behavior when dropped on the dropzone. This can be seen in the fiddle. I'm also able to drag and drop it anywhere within the visible area of the dropzone div.

I want to be able to pick it up again and move it anywhere in the dropzone to the far right or way down low so you need to scroll. What is happening is the scroll bars do engage, but once dragged, it snaps back. I can though, drag it anywhere in the visible area.

My other code(omitted) needs revert and helper clone enabled, which is why it's being used here. The other code works 100% If i try some of the solutions provided for other problems, things get worse or stop working all together, either in this example, or in my other code that uses the helper clone/revert too

How can \i accomplish this??? fiddle: http://jsfiddle.net/zVZ6X/22/ css

body{margin:0; padding:0; background-color:grey;}
.sandbox { position:relative; 
           overflow:scroll; 
           width:600px; 
           height:250px;
           background-color:#F7DF7C; 
           border:none; padding:0; }
.tilecontainer{ position:fixed; 
            bottom:10px; 
            height:150px; 
            width:400px; 
            background-color:#C7DE7C; }
.thumbsize{ height:100px; 
            width:100px; 
            float:left; 
            border:0;
            overflow:hidden;}
.absolute{ position:absolute; }

html

<div id='sandbox' class='sandbox'></div>
<div id='tilecontainer' class='tilecontainer'>
<div id='thumb1' class='thumbsize' style='background-color:red;'></div>   
<div id='thumb2' class='thumbsize' style='background-color:blue;'></div>   
<div id='thumb3' class='thumbsize' style='background-color:orange;'></div>   
</div>

js

$(function() {
$( ".thumbsize" ).draggable({
        helper:"clone", 
        revert: "invalid",
        grid: [ 100, 100 ],
        zIndex: 100,
        opacity: 0.55,
        stack: ".thumbsize",
        containment: "sandbox",
        scroll: true
 });

$("#sandbox").droppable({
    drop: function(event, ui) {
        $(ui.draggable).appendTo(this).addClass('absolute').css({
            top: ui.offset.top,
            left: ui.offset.left,
        });
    }
});

});

My other code(omitted) needs revert and helper clone enabled, which is why it's being used here. The other code works 100%

Answer 1

adding

$(ui.draggable).draggable({ revert: false });$(ui.draggable).draggable({ helper: "original"});

did the trick!

I suppose having the clone helper in combination with revert was the culprit. if either of these attributes were removed individually, the problem was still present. Both needed to be removed for it work, but if i removed them both I lost the revert functionality needed by my other code.

the answser is to drop the offending attributes when dropped, or remove BOTH revert and clone helper.