Question

我在使用此插件方面已经走了很长一段路，最后终于找到了我期望的解决方案，如下所示。请运行以下小提琴：（最好将代码复制到记事本文件中，保存在HTML中并运行它）

我的结局如何

  $(function () {
            $("#sortable1, #sortable2").sortable({
                connectWith: ".connectedSortable"
            }).disableSelection();
        });

        #sortable1, #sortable2 {
            border: 1px solid #eee;
            width: 142px;
            min-height: 20px;
            list-style-type: none;
            margin: 0;
            padding: 5px 0 0 0;
            float: left;
            margin-right: 10px;
        }

            #sortable1 li, #sortable2 li {
                margin: 0 15px 15px 15px;
                padding: 5px;
                font-size: 1.2em;
                width: 120px;
            }

            #sortable1 ul li {
                display: block;
                text-align: center;
                float: left;
            }

            #sortable2 ul li {
                display: block;
                text-align: center;
                float: left;
            }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<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>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  
  <div class="col-md-5">
        <div class="col-md-12">
            <ul id="sortable1" class="connectedSortable">
                <li class="ui-state-default">Item 1</li>
            </ul>
        </div><br />
        <div class="col-md-12">
            <ul id="sortable1" class="connectedSortable">
                <li class="ui-state-default">Item 2</li>
            </ul>
        </div><br />
        <div class="col-md-12">
            <ul id="sortable1" class="connectedSortable">
                <li class="ui-state-default">Item 3</li>
            </ul>
        </div><br />
        <div class="col-md-12">
            <ul id="sortable1" class="connectedSortable">
                <li class="ui-state-default">Item 4</li>
            </ul>
        </div><br />
        <div class="col-md-12">
            <ul id="sortable1" class="connectedSortable">
                <li class="ui-state-default">Item 5</li>
            </ul>
        </div><br />
    </div>

    <div class="col-md-5">
        <div class="col-md-12">
            <ul id="sortable2" class="connectedSortable">
                <li></li>
            </ul>
        </div>

        <div class="col-md-12">
            <ul id="sortable2" class="connectedSortable">
                <li></li>
            </ul>
        </div>
        <div class="col-md-12">
            <ul id="sortable2" class="connectedSortable">
                <li></li>
            </ul>
        </div>
        <div class="col-md-12">
            <ul id="sortable2" class="connectedSortable">
                <li></li>
            </ul>
        </div>
        <div class="col-md-12">
            <ul id="sortable2" class="connectedSortable">
                <li></li>
            </ul>
        </div>
    </div>

问题是，我试图将左右面板的框的高度/宽度固定为空格，但失败了。使用插件的拖放功能时，我可以在浏览器的inspect元素中看到类：

ui-sortable
ui-sortable-handle

我在考虑是否可以覆盖这些类，并使其按预期方式工作（已经尝试过但没有完成）。我期待有人来做过最后一次审判，否则我很不走运。

更新1 ：预期输出

Answer 1

只需将所有html元素包装在div中即可。

这里有一个CodePen：https://codepen.io/gterigi/pen/LYNjGRK

<div class="FlexColumn">
...Your sortable element...
</div>

<style>
.FlexColumn{
display:flex;
}
#sortable1 li, #sortable2 li {
    min-height: 40px;
}
</style>

小的免责声明。它没有反应。如果您希望所有可排序元素始终具有相同的高度，则最好在该元素上附加一些事件侦听器，以便在最大元素的基础上重新调整所有元素的高度。

Answer 2

添加更高的最小高度

#sortable1,
#sortable2 {
    ...
    min-height: 70px;
    margin-bottom: 5px;
    ...
}

免责声明：这仅适用于您的代码，并且没有响应。

修复jQuery可排序插件的高度和宽度

2 个答案: