Jquery draggable/droppable and overflow style

Issue

I am having a problem with a drag and drop system using CSS overflow values to vertically scroll a list of values that can be dragged between selected and unselected values. However when you drag from one to the other the dragged item disappears at the end off the overflowed element, no matter what the value.

I have created a quick codepen as an example: https://codepen.io/richardsmorgan/pen/NWYodYy

HTML

<div class="drag-area">
  <div class="area">Droppable Area 1</div>
  <div class="box">Box1</div>
  <div class="box">Box2</div>
</div>
<div class="drag-area">
  <div class="area">Droppable Area 2</div>
</div>
<div class="result">-</div>

CSS

.drag-area {
  width: 200px;
  height: 200px;
  background: #fff;
  display: inline-block;
  overflow-x: visible;
  overflow-y: scroll;
  
  vertical-align: top;
  position: relative;
  margin-left: 30px;
  border: 1px solid #ddd;
  box-shadow: 3px 3px 6px 3px rgba(0,0,0,0.06)
}
.area {
  position:absolute;
  margin: 0 auto;
  color: #ccc;
  font-size: 20px;
  bottom: 10px;
  left: 20px;
}
.box {
    width: 50px;
    height: 50px;
    background: #673AB7;
    color: #fff;
    text-align: center;
    z-index: 2;
    border:2px solid #512DA8;
  
}
.result {
  display: inline-block;
  margin-left: 30px;
}

JAVASCRIPT

$( ".box" ).draggable({
  scope: 'demoBox',
  revertDuration: 100,
  start: function( event, ui ) {
    //Reset
    $( ".box" ).draggable( "option", "revert", true );
    $('.result').html('-');
  }
});

$( ".drag-area" ).droppable({
   scope: 'demoBox',
   drop: function( event, ui ) {
     var area = $(this).find(".area").html();
     var box = $(ui.draggable).html()     
     $( ".box" ).draggable( "option", "revert", false );
     
     //Display action in text
     $('.result').html("[Action] <b>" + box + "</b>" +
                       " dropped on " + 
                       "<b>" + area + "</b>")
     
     //Realign item
     $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
   }
})

Does anyone have a fix for this or is it inherently a broken idea?

Solution

Consider the following example.

$(function() {
  $(".box").draggable({
    appendTo: "body",
    helper: "clone",
    scope: 'demoBox',
    revertDuration: 100,
    start: function(event, ui) {
      $(this).css("visibility", "hidden");
      $('.result').html('-');
    }
  });

  $(".drag-area").droppable({
    scope: 'demoBox',
    drop: function(event, ui) {
      var area = $(this).find(".area").html();
      var box = $(ui.draggable).html()
      $('.result').html("[Action] <b>" + box + "</b>" +
        " dropped on " +
        "<b>" + area + "</b>")

      //Realign item
      $(ui.draggable).detach().css({
        top: 0,
        left: 0,
        visibility: "visible"
      }).appendTo(this);
    }
  })
})

.drag-area {
  width: 200px;
  height: 200px;
  background: #fff;
  display: inline-block;
  overflow-x: visible;
  overflow-y: scroll;
  vertical-align: top;
  position: relative;
  margin-left: 30px;
  border: 1px solid #ddd;
  box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, 0.06)
}

.area {
  position: absolute;
  margin: 0 auto;
  color: #ccc;
  font-size: 20px;
  bottom: 10px;
  left: 20px;
}

.box {
  width: 50px;
  height: 50px;
  background: #673AB7;
  color: #fff;
  text-align: center;
  z-index: 2;
  border: 2px solid #512DA8;
}

.result {
  display: inline-block;
  margin-left: 30px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div class="drag-area">
  <div class="area">Droppable Area 1</div>
  <div class="box">Box1</div>
  <div class="box">Box2</div>
</div>
<div class="drag-area">
  <div class="area">Droppable Area 2</div>
</div>
<div class="result">-</div>

If you do not want to Clone the element, you can detach it from the parent in Start or use helper options.

Answered By - Twisty