Jquery draggable/droppable and overflow style-CodePudding

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 >
  <div >Droppable Area 1</div>
  <div >Box1</div>
  <div >Box2</div>
</div>
<div >
  <div >Droppable Area 2</div>
</div>
<div >-</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?

CodePudding user response：

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 >
  <div >Droppable Area 1</div>
  <div >Box1</div>
  <div >Box2</div>
</div>
<div >
  <div >Droppable Area 2</div>
</div>
<div >-</div>

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