Question

我在页面上有四个可放弃的div。另外，我有一些可拖放到每个可放置的拖动器。

如果我将足够的可拖动物放入一个可放置的物体中，那么它就会溢出。我想要做的是在需要时在该droppable上启用overflow-y: scroll;。

问题是，如果我有'overflow-y：scroll;'启用然后拖动器出现在可放置div之下（例如，它们消失）。或者，如果我没有'溢出-y：'设置，那么它显然会溢出。

Underneith下面的代码是一个你可以运行的代码片段（注意：你可能需要全屏显示这个问题）。

非常感谢任何帮助：）

$(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>

Answer 1

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;
}

Jquery - 如何设置溢出以滚动具有多个droppable的draggables

1 个答案: