Jquery drag and drop scrollbar issue
<p>Full HTML file below. Question below that. </p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;


&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"&gt;&lt;/script&gt;

&lt;title&gt;slider&lt;/title&gt;

&lt;style&gt;

.container{
    width: 100%;
    heght: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    overflow: hidden;
}

.test{
    ooverflow: hidden;
    border: 1px solid green;
}

.header{
    height: 100px;
    border: 1px solid orange;
    margin-bottom: 1px;
}

.pices{
    width: 255px;
    height: 600px;
    border: 1px solid black;
    overflow-x: scroll;
    margin-bottom: 40px;
    margin-right: 25px;
    position:absolute;
}

.image{
    width: 90%;
    height: 200px;
    background-color: lightblue;
    margin: 10px 0 10px 10px;
}


.board{
    width: calc(100% - 300px);
    height: 600px;
    border: 1px solid red;
    float: right;
    margin: 0;
}


&lt;/style&gt;


  &lt;script&gt;

  $(document).ready(function(){
        $(".image").draggable({ 
            opacity: 0.7, 
            helper: function(event) {
                return $(event.target).clone().css({
                    width: $(event.target).width()
                });

            }
        });  

        $(".board").droppable({
            accept: ".image",
            drop: function(event,ui){
                var itemToClone = $(ui.draggable);
                $(this).append(itemToClone.clone().css({
                    width: itemToClone.width(),
                    margin: 0
                }));
            }
        });
    });


 &lt;/script&gt;


&lt;/head&gt;
  &lt;body&gt;
    &lt;div class="container"&gt;

        &lt;div class="header"&gt;



        &lt;/div&gt;
        &lt;div class="test"&gt;
            &lt;div class="pices"&gt;

                &lt;div class="image"&gt;&lt;/div&gt;
                &lt;div class="image"&gt;&lt;/div&gt;
                &lt;div class="image"&gt;&lt;/div&gt;
                &lt;div class="image"&gt;&lt;/div&gt;
                &lt;div class="image"&gt;&lt;/div&gt;

            &lt;/div&gt;

            &lt;div class="board"&gt;



            &lt;/div&gt;
        &lt;/div&gt;

      &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>So, I have been trying to Get the divs from the scrollbox to drag out with no luck. It seems they are stuck inside that div due to the overflow-x: scroll but, I need this. Then when they do drop in the right side div they are not the same size or if they are the same size they are not movable. I have tried the following code to get it to work with no luck. Any advice would be helpful thank you. I also have a <a href="https://jsfiddle.net/majortom8478/pa6bxd11/6/" rel="nofollow">jsfiddle</a> for working example</p>

<pre><code>/*
    // there's the gallery and the trash
    var $gallery = $( ".pices" ),
    $board = $( ".board" );

    // let the gallery items be draggable
    $( "div", $gallery ).draggable({
        cancel: "a.ui-icon", // clicking an icon won't initiate dragging
        revert: "invalid", // when not dropped, the item will revert back to its initial position
        containment: "document",
        helper: "clone",
        cursor: "move"
    });*/

    /*$(function() {

        $( ".image" ).draggable({
            helper: 'clone',
            appendTo: 'div.board'
        });

        $(".image").draggable({ 
            zIndex: 999
        });

        $( ".board" ).droppable( {
            accept: '.image',
        });

     });*/

     /*$(function() {

        $( ".image" ).draggable({
            containment: $('.pices'),
            helper: 'clone'
        });

        $( ".board" ).droppable( {
            accept: '.image'
        });

     });*/


     /*$(function() {

        $( ".image" ).draggable({
            revert: true,
            zIndex: 9999,
            appendTo: 'board',
            start: startedDrag,
            stop:stoppedDrag
        });

        function startedDrag() {

            $('.pices').css({
                overflow: 'visible',
            });
            $('.test').css({
                overflow: 'hidden',
            });
        }

         function stoppedDrag() {

            $('.pices').css({
                overflow: 'scroll',
            });
        }


        $( ".board" ).droppable( {
            accept: '.image'
        });

     });*/



    /*$(function() {

        $( ".image" ).draggable({
            scroll: false,
            revert: 'invalid'
        });

        $( ".board" ).droppable( {
            drop: function(event, ui) {
                //jQuery(this).addClass('dropped');

                var clone = ui.draggable;
                clone.appendTo(this);

                // this assumes the mouse grabbed in the middle of the div

                //var width = clone.width();
                //var height = clone.height();
                //clone.offset({'top':event.pageY-height/2 ,
                             // 'left':event.pageX-width/2 })
            }
        });

    });*/


    /*$( document ).ready(function() {

        $( ".image" ).draggable({
            helper: 'clone',
            zIndex: 9999999
        });

        $( ".board" ).droppable({
            accept: '.image',
            drop: function( event, ui ) {
                $(ui.draggable).clone().appendTo($(this));
            }
        });
    });*/

    /*$( document ).ready(function() {

        $( ".image" ).draggable({
            helper: 'clone',
            zIndex: 9999999
        });

        $(".board").droppable({
            accept: ".image",
            drop: function(event, ui) {
                var cloned = $(ui.helper).clone();
                cloned.attr("id", "clonedElem" + counter);
                var pos = $(ui.helper).offset();

                var draggableOffset = ui.helper.offset(),
                    droppableOffset = $(this).offset(),
                    left = draggableOffset.left - droppableOffset.left,
                    thisTop = draggableOffset.top - droppableOffset.top;

                cloned.css({
                    "position": "absolute",
                    "left": left,
                    "top": thisTop
                });

                cloned.attr("visible", "true");

                cloned.draggable({
                    containment: 'parent',
                    stop:function(ev, ui) {
                        console.log("aqui");
                    }
                });
                $(".board").append(cloned);
                    counter++;
            }
        });
    });*/



    /*$( document ).ready(function() {

        $( ".image" ).draggable({
            helper: 'clone',
            zIndex: 9999999
        });

        $( ".board" ).droppable({
            accept: '.image',
            drop: function( event, ui ) {
                $(ui.draggable).clone().appendTo(this);
            }
        });
    });*/
</code></pre>