Stack Exchange
Jquery drag and drop scrollbar issue
Full HTML file below. Question below that. 
<!DOCTYPE html>
<html>
<head>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<title>slider</title>

<style>

.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;
}


</style>


  <script>

  $(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
                }));
            }
        });
    });


 </script>


</head>
  <body>
    <div class="container">

        <div class="header">



        </div>
        <div class="test">
            <div class="pices">

                <div class="image"></div>
                <div class="image"></div>
                <div class="image"></div>
                <div class="image"></div>
                <div class="image"></div>

            </div>

            <div class="board">



            </div>
        </div>

      </div>
  </body>
</html>

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 jsfiddle for working example
/*
    // 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);
            }
        });
    });*/


I took your code and tinkered with it for a bit.
Here is a solution that I implemented using display:inline-block in order to get the pieces and board container to align.
Taking away the position:absolute from your pieces class solves the scrollbar issue.
As far as the size of the piece changing it's best to stick with static values.
CSS
.pices{
    width: 255px;
    height: 600px;
    border: 1px solid black;
    margin-right: 25px;
    overflow:auto;
    display:inline-block;
}

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

.board{
    width: calc(100% - 300px);
    height: 600px;
    border: 1px solid red;
    margin: 0;
    display:inline-block;
    position: absolute;
}

Simplified Append
$(".board").droppable({
    accept: ".image",
    drop: function(event,ui){
        ui.draggable.css('width',ui.draggable.width()+'px').css('display','inline-block');
        $(this).append(ui.draggable);
    }
});

See Fiddle

@user2852603, please mark this answer as accepted if it answered your question, or leave feedback. Thanks

Thank you for this, but it is not cloning over the div, looks like it moving it over. then it is not movable after its been dragged to the new div. I will be looking at this later to see if i can fix it

@user2852603 Your original question was about a scroll bar issue.  That is what I thought I was resolving for you.  Your new concern would probably be best addressed with a new question.  However I did verify that the box is in fact draggable.. If you drag the box down it will move to the bottom.  (example changing one of the boxes to red so you can see it easier https://jsfiddle.net/xqzw3raf/2/)  Now that may not be the exact functionality you are looking for but it is draggable.

TY for the help, yeah that was my mistake. If I end up needing help with the grad and drop in the other div I'll make a new question. But I am very grateful for the help. Wish I knew why the position made issues.

@user2852603 I'm not great with CSS, however the problem isn't necessarily the position.  But more the combination of the position:absolute and the overflow-x:hidden together.  If you take away the overflow-x and leave the position absolute, it can work.  But when you have them both together the browser scrolls within the element on drag.

I find in your css code has some of typo issue: 
like heght in .container and ooverflow in .test
Here the fix is I remove unwanted overflow in .test and .pices and added display: inline-block; in .pices.Here is update link
https://jsfiddle.net/ahkeno/gwLaqtw2/
