javascript - jQuery UI-draggable:当容器有滚动窗口时也变得可滚动
问题描述
我有 3 个高 .sortable div。每个 .sortable div 包含多个 div,可以拖动到任何 .sortable div。由于这两种 div 都很高,每个 .sortable div 都需要滚动,整个页面也需要。当我想将一个项目从最后一个 div 拖到第一个时,每个 .sortable div 内的滚动都可以工作,但整个页面的滚动却不行。答案是不可能完成任务。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>sortable demo</title>
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<style type="text/css">
.sortable {
border: solid;
width: 700px;
height: 600px;
overflow: auto;
}
.item {
float: left;
border: solid;
width: 250px;
height: 550px;
margin: 5px;
background-color: black;
opacity: 0.5
}
</style>
</head>
<body>
<div class="sortable">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="sortable">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="sortable">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script>
$(".sortable").sortable({
connectWith: ".sortable"
});
</script>
</body>
</html>
解决方案
推荐阅读
- reactjs - Submitting form with redux form
- c# - 使用 string.Remove() 从字符串中删除特定字符的所有并发
- javascript - Javascript 或 Jquery 使用 foreach 添加到通用对象
- python - twine not found (-bash: twine: command not found)
- c# - 选择的 RadioButton 是错误的
- django - django - where can i clean the data of a formset?
- wxpython - wxPython multiline password field
- r - R to JSON: trouble embedding an array
- android - can I use different themes on different activity screens
- javascript - Changing display text based on scheduled GMT