Drag ' n drop from div with collapse and position fixed

Question

Drag ' n drop from div with collapse and position fixed

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

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

This is what is happening when I try to drag the 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 am a few days away breaking my head with this citizen, if anyone knows how to solve, I will be eternally grateful.

EDIT 1 - Follows excerpt from the CSS and HTML of the 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>

0

jquery ui-draggable

Author: David, 2019-05-06

Source

1 answers

score 0 · Answer 1

You need to use a droppable to be able to drop an element into 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 action of the event drop, which is called when some element is dropped in the container. Check out all documentation here .

Follows 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>