Question

所以我的问题就像标题所暗示的那样。我的工作是在JSP中，但为了清楚起见，我尽可能地在HTML中重新创建了这个问题。本质上，在主页面（非简化版本）中，我使用sortable来允许在拖放方法（移动列表项）中重新排列元素。当页面底部只是简单地扩展包含div的底部并添加滚动条时，页面只允许滚动（凹凸滚动）。我需要的是当上面和下面有元素时（我设置为可排序的元素）我需要页面/包含元素以允许我上下滚动。

以下代码是一个令人难以置信的基本重新创建，这个代码允许我向上滚动，当我不在元素的顶部但在任何情况下都不允许我在元素的任何点向下滚动。

以下是退回：

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
  $(function() {
    $("#sortable").sortable({placeholder:"placeHolder", scroll: true, axis: "y", opacity: 0.5});
    $("#sortable").disableSelection();
  });
</script>
<style>
  #sortable{
    list-style:none;
  }
  .formatlist{
    border: 2px solid red;
    padding: 40px;
    margin: 5px;
    width: 50%;
    text-align: center;
  }
  .placeHolder{
    border: 2px solid #ff8833;
    padding: 40px;
    margin: 5px;
    width: 50%;
    text-align: center;
    background-color: #ffee88; 
  }
</style>
  </head>
  <body>
    <div>
  <ul id="sortable">
    <li class="formatSort"><div class="formatlist">NUMERO ONE This is a test on a list that drags LalLalala......</div></li>
    <li class="formatSort"><div class="formatlist">NUMERO TWO This is a test on a list that drags LalLalala......</div></li>
    <li class="formatSort"><div class="formatlist">NUMERO THREE This is a test on a list that drags LalLalala....</div></li>
    <li class="formatSort"><div class="formatlist">NUMERO FOUR This is a test on a list that drags LalLalala.....</div></li>
    <li class="formatSort"><div class="formatlist">NUMERO FIVE This is a test on a list that drags LalLalala.....</div></li>
    <li class="formatSort"><div class="formatlist">NUMERO SIX This is a test on a list that drags LalLalala......</div></li>
    <li class="formatSort"><div class="formatlist">NUMERO SEVEN This is a test on a list that drags LalLalala....</div></li>
    <li class="formatSort"><div class="formatlist">NUMERO EIGHT This is a test on a list that drags LalLalala....</div></li>
    <li class="formatSort"><div class="formatlist">NUMERO NINE This is a test on a list that drags LalLalala.....</div></li>
  </ul>
</div>

Answer 1

我想我已经得到了，你错过了文档类型，我在开头<!DOCTYPE html>上方的文档的最顶部添加了<html>并且它有效。

<!DOCTYPE html>
<html>
  <head> ... and so on

jsFiddle会自动添加它，因此无法重新创建它。

JQuery Sortable Scroll，将向上滚动但不向下滚动

1 个答案: