Search code examples
javascriptjqueryjquery-uijquery-ui-draggablejquery-ui-droppable

Jquery - how to set overflow to scroll for draggables with multiple droppables

I have four droppable divs on the page. In addition, I have a number of draggables that can be dropped into each droppable.

If I drop enough draggables into a droppable then it overflows. What I want to do is enable overflow-y: scroll; on that droppable once I it is required.

The problem is that I if I have the 'overflow-y: scroll;' enabled then the draggables appear below the droppable divs (eg. they disappear). Alternatively, if I don't have `'overflow-y:' set then it obviously overflows.

Underneith the code below is a snippet you can run to look at this (note: you'll probably need this in full screen to see the issue).

Any help would be greatly appreciated :)

$(document).ready(function() {

  setDraggables();
  setDroppables();

});

// Manage drag and drop of added items
$(document).on('drag', 'div.uiTask', function(e) {

});

function setDraggables() {
  $('.uiTask').draggable();
}

function setDroppables() {

  $("#urgentImportantTopLeft").droppable({
    drop: function(event, ui) {
      $(this).append('<div class="uiTask">This is a task</div>');
      setDraggables();
      ui.draggable.remove();
    }
  });

  $("#urgentImportantTopRight").droppable({
    drop: function(event, ui) {
      $(this).append('<div class="uiTask">This is a task</div>');
      setDraggables();
      ui.draggable.remove();
    }
  });

  $("#urgentImportantBottomLeft").droppable({
    drop: function(event, ui) {
      $(this).append('<div class="uiTask">This is a task </div>');
      setDraggables();
      ui.draggable.remove();
    }
  });

  $("#urgentImportantBottomRight").droppable({
    drop: function(event, ui) {
      $(this).append('<div class="uiTask">This is a task</div>');
      setDraggables();
      ui.draggable.remove();
    }
  });
}
#urgentImportant {
  position: absolute;
  height: 100%;
  width: 100%;
}
#urgentImportantTopLeft,
#urgentImportantTopRight,
#urgentImportantBottomLeft,
#urgentImportantBottomRight {
  z-index: 0;
  height: 50%;
  border: 1px solid white;
}
.tasks {} .uiTask {
  display: inline-block;
  width: 100%;
  padding: 0.5em;
  margin: 0.25em 0.25em;
  background-color: grey;
  border-radius: 5px;
  cursor: grab;
  z-index: 1000;
}
<head>
  <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>

<div id="urgentImportant">
  <div id="urgentImportantTopLeft" class="w3-container w3-half w3-blue">Urgent / Important

    <div class="tasks"></div>
    <div class="uiTask">This is a task</div>
    <div class="uiTask">This is a task</div>
    <div class="uiTask">This is a task</div>
    <div class="uiTask">This is a task</div>
    <div class="uiTask">This is a task</div>
    <div class="uiTask">This is a task</div>
    <div class="uiTask">This is a task</div>
    <div class="uiTask">This is a task</div>
    <div class="uiTask">This is a task</div>
  </div>

  <div id="urgentImportantTopRight" class="w3-container w3-half w3-blue">Not urgent / Important
    <br>
    <br>
    <div class="uiTask">This is a task</div>
  </div>
  <div id="urgentImportantBottomLeft" class="w3-container w3-half w3-blue">Urgent / Not important
    <br>
    <br>
    <div class="uiTask">This is a task</div>
  </div>
  <div id="urgentImportantBottomRight" class="w3-container w3-half w3-blue">Not urgent / Not important
    <br>
    <br>
    <div class="uiTask">This is a task</div>
  </div>
</div>

Solution 
  • You have to use some jquery draggable methods to handle this,i have updated     your code below.
//replace your setDraggables func with this.
function setDraggables() {
    $('.uiTask').draggable({
         helper: 'clone',
         revert: 'invalid'      
    });
}

//change your css as this
#urgentImportantTopLeft,
#urgentImportantTopRight,
#urgentImportantBottomLeft,
#urgentImportantBottomRight {
     z-index: 0;
     height: 50%;
     border: 1px solid white;
     overflow:scroll;
}

.tasks {
    overflow: overlay;
} 

.uiTask {
     display: block;
     width: 20%;
     padding: 0.5em;
     margin: 0.25em 0.25em;
     background-color: grey;
     border-radius: 5px;
     cursor: grab;
     z-index: 1000;
}