Question

我有一个带溢出的容器：隐藏，可以填充最多6个元素。当我对1到6个元素进行排序时，它正在工作，但是当元素被转换为Y时，可排序在拖动后变得疯狂。这很难形容，所以只要看看我的小提琴：

＆＃13;

$(".barbox").sortable();


$("#scrolled").children(".bar").css("transform", "translateY(-153px)");

＆＃13;

.barbox
{
    height: 307px;
    overflow: hidden;
}

h1
{
    margin-top: 30px;
}

.bar
{
    display: flex;
    align-items: center;
    height: 50px;
    width: 300px;
    background-color: yellow;
    border-top: 1px solid red;
    overflow: hidden;
    vertical-align:bottom;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>


<h1>Example 1:</h1>
    <div class="barbox">
        <div class="bar"><div class="task">Task 1.</div></div>
        <div class="bar"><div class="task">Task 2.</div></div>
        <div class="bar"><div class="task">Task 3.</div></div>
        <div class="bar"><div class="task">Task 4.</div></div>	
        <div class="bar"><div class="task">Task 5.</div></div>
        <div class="bar"><div class="task">Task 6.</div></div>
        <div class="bar"><div class="task">Task 7.</div></div>	
        <div class="bar"><div class="task">Task 8.</div></div>
        <div class="bar"><div class="task">Task 9.</div></div>
    </div>
 <h1>Example 2:</h1>
    <div class="barbox" id="scrolled">
        <div class="bar"><div class="task">Task 1.</div></div>
        <div class="bar"><div class="task">Task 2.</div></div>
        <div class="bar"><div class="task">Task 3.</div></div>
        <div class="bar"><div class="task">Task 4.</div></div>	
        <div class="bar"><div class="task">Task 5.</div></div>
        <div class="bar"><div class="task">Task 6.</div></div>
        <div class="bar"><div class="task">Task 7.</div></div>	
        <div class="bar"><div class="task">Task 8.</div></div>
        <div class="bar"><div class="task">Task 9.</div></div>
    </div>

＆＃13;

如何看，示例2中拖动的元素正在跳跃。

我该如何解决这个问题？

溢出隐藏容器中的jQuery UI可排序列表。拖动的元素跳起来

0 个答案: