页面上有四个可放置的 div。此外，我还有许多可拖动对象，可以将其放入每个可放置对象中。
如果我将足够多的可拖动对象放入可放置对象中，则会溢出。我想要做的是在需要时在该可删除项上启用 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>最佳答案
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;
}
关于javascript - Jquery - 如何设置溢出以滚动具有多个可放置的可拖动对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33411095/