How do I get my draggable elements to drag outside of a scroll box?

Question

I have draggable elements that I'd like to scroll if they overflow the container, however, I also need these items to be draggable outside of the that scroll container.

This is my code so far. http://pastie.org/p/1QD6PUvYOGikOIcMxXQ2Lc

I'm currently working on the 'tables' section and right now it scrolls correctly, but the element can only drag freely within the container and not outside of it. I believe I need to do some cloning, but haven't found a code that works yet.

Any help is so appreciated! Thank you!

$(function() {
  $(".draggableContainer").draggable();
});

* {
  margin: 5px;
  padding: 0px;
}


.chairs {
    min-height:180px;
    padding:0px;
    background-color:none;
    border: 1px solid #000;
    overflow:scroll;

}

.tables {
    min-height:190px;
    padding:0px;
    background-color:none;
    border: 1px solid #000;
    overflow:scroll;
    
}


  .draggableImage1 {
    float:left;
    width:20%;
  }
  
        .draggableImage2 {
    float:left;
    width:20%;
  }
  
    .draggableImage3 {
    float:left;
    width:20%;
  }
  
      .draggableImage4 {
    float:left;
    width:20%;
  }

#tables {
width:180%;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js" integrity="sha512-0bEtK0USNd96MnO4XhH8jhv3nyRF0eK87pJke6pkYf3cM0uDIhNJy9ltuzqgypoIFXw3JSuiy04tVk4AjpZdZw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!--CHAIRS-->



<div class="chairs" >
      
      

      
<div id="chairs" class="draggableContainer">
    <p>
      <img class="draggableImage1" src="https://static.showit.co/file/xCPXfMhHSH-__o2L1_op_g/118367/1.png">
    </p>
  </div>

        <div id="chairs" class="draggableContainer">
    <p>
      <img class="draggableImage2" src="https://static.showit.co/file/vkS6ONMRTh-QEvu_WvGd2g/118367/2.png">
    </p>
  </div>
      
  
    <div id="chairs" class="draggableContainer">
    <p>
      <img class="draggableImage3" src="https://static.showit.co/file/31CkxDO2SLONt87mqhtJ1w/118367/3.png">
    </p>
  </div>
  
      <div id="chairs" class="draggableContainer">
    <p>
      <img class="draggableImage4" src="  https://static.showit.co/file/kxz-kSwCTWm9z6cUQRk8ZA/118367/4.png">
    </p>
  </div>
  
   </div>
    


 
 <!--TABLES-->
 
   
    <div class="tables" >
      
  <div id="tables" class="draggableContainer">
    <p>
      <img class="draggableImage1" src="https://static.showit.co/file/KUe1-FuzROys0_APdzMgtQ/118367/untitled_design_52.png">
    </p>
  </div>
  
  
    <div id="tables" class="draggableContainer">
    <p>
      <img class="draggableImage2" src="https://static.showit.co/file/Z0Dv7p_sSJm9bCTRLcP8gg/118367/4.png">
    </p>
  </div>
  
      <div id="tables" class="draggableContainer">
    <p>
      <img class="draggableImage3" src="  https://static.showit.co/file/x4PJjyM-QKyWCsejlN1Gkg/118367/3.png">
    </p>
  </div>
  
  
      
    </div>

Answer 1

You can use helper for this problem:

$(function() {
    $(".draggableContainer").draggable({helper: 'clone'});
});