Jquery

Question

我在页面上有四个可放置的 div。此外，我还有许多可拖放到每个 droppable 中的 draggable。

如果我将足够多的 draggables 放到 droppable 中，它就会溢出。我想要做的是在需要时在该可投放设备上启用 overflow-y: scroll;。

问题是，如果我启用了 'overflow-y: scroll;'，则可拖动对象会出现在可放置的 div 下方（例如，它们会消失）。或者，如果我没有设置 `'overflow-y:' 那么它显然会溢出。

下面的代码是一个片段，您可以运行查看这个（注意：您可能需要全屏查看这个问题）。

任何帮助将不胜感激:)

$(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 - 如何设置溢出以滚动具有多个可拖动对象的可拖动对象

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

javascript

jquery-ui

jquery-ui-draggable

jquery-ui-droppable