Drag 'n drop from div with Collapse and position Fixed

Question

Good morning, I want to use the Jquery-Ui Draggable to accomplish the drag 'n drop from a side panel. The problem is that this panel is overlaid the page with a position: fixed and when dragging the elements out, two situations occur:

• With the default configuration of draggable, the elements do not leave the div parent (panel);
• When setting some settings on startup draggable, I can even drag the elements out of the div, but the event of drop on top of the body is never triggered.

This is what is happening when I try to drag items. In addition to not being able to release them, the mouse position is also incorrect.

This is the draggable configuration:

$('.draggable-dash').draggable({
  revert: "invalid",
  helper: 'clone',
  appendTo: '.dropdashboard',
  containment: 'body',
  //zIndex: 2500,
  scroll: false,
  cursorAt: { top: -5, left: -5 },
  start: function(){
    $(this).hide();
  },
  stop: function(){
    $(this).show()
  }            
});

I’m a few days away from cracking my head with this citizen, in case anyone knows how to fix it, I’ll be eternally grateful.

EDIT 1 - Follows CSS and HTML excerpt from panel

.theme-panel {
    position: fixed;
    right: -175px;
    top: 150px;
    z-index: 1020;
    background: #fff;
    padding: 15px;
    width: 175px;
    transition: right .2s linear;
    border-radius: 4px 0 0 4px;
}

.theme-panel.theme-panel-lg .theme-panel-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: scroll;
    margin: 0;
    padding: 20px;
}

<div class="theme-panel theme-panel-lg">
    <a href="javascript:;" data-click="theme-panel-expand" class="theme-collapse-btn" id="tourTema"><i class="fa fa-cog"></i></a>
    <div class="theme-panel-content">
        <h5>Indicadores</h5>
        <div class="theme-version draggitens">
            <div class="row">
                <div class="col-lg-4 col-md-6 text-center draggable-dash">
                    <p><img src="./img/area-chart.png"></p>
                    <p>Indicador 1</p>
                </div>
                <div class="col-lg-4 col-md-6 text-center draggable-dash">
                    <p><img src="./img/bar-chart.png"></p>
                    <p>Indicador 2</p>
                </div>
                <div class="col-lg-4 col-md-6 text-center draggable-dash">
                    <p><img src="./img/dashboard.png"></p>
                    <p>Indicador 3</p>
                </div>
                <div class="col-lg-4 col-md-6 text-center draggable-dash">
                    <p><img src="./img/line-chart.png"></p>
                    <p>Indicador 4</p>
                </div>
                <div class="col-lg-4 col-md-6 text-center draggable-dash">
                    <p><img src="./img/pie-chart.png"></p>
                    <p>Indicador 5</p>
                </div>
                <div class="col-lg-4 col-md-6 text-center draggable-dash">
                    <p><img src="./img/doughnut-chart.png"></p>
                    <p>Indicador 6</p>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

You need to use a droppable to be able to drop an element inside it. In the element with droppable you can tell which elements it accepts (in the case of the example, it accepts elements with the selector "#painel .draggable-dash") and you can perform some event action drop, which is called when some element is dropper in the container. Check out all the documentation here.

Follow an example:

$(function(){
  
  $('.draggable-dash').draggable({
    revert: "invalid",
    cursor: "move"
  });
  

  $( "#droppable" ).droppable({
    accept: "#painel .draggable-dash",
    drop: function( event, ui ) {
      $(this).append(ui.draggable[0]).css({left: 0, top: 0});
    }
  });

});

#painel{
  position: fixed;
  background-color: blue;
  height: 100vh;
  width: 200px;
  right:0;
  top:0;
}

.draggable-dash{
  background-color: black;
  width: 50px;
  height: 50px;
  cursor: pointer;
  color: white;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
}

#droppable{
  width: 400px;
  height: 200px;
  background-color: red;
}

#droppable .draggable-dash {
  float: left;
  margin: 5px;
  left: 0 !important;
  top: 0 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>
<body>
  <div id="painel">
    <div class="draggable-dash">1</div>
  </div>
  <div id="droppable">
  </div>
</body>