Question

我创建了一个包含类别的简单菜单，我希望这些类别可以拖动和排序。代码是：

<div class="col-md-4" style="border: 1px solid black;">
            <div class="row" style="padding-top: 12px;">
                <div class="col-md-6" style="text-align: left;">
                    <b>Category name</b>
                </div>
                <div class="col-md-3" style="text-align: center;">
                    <b>Products</b>
                </div>
                <div class="col-md-3" style="text-align: center">
                    <b>Popularity</b>
                </div>
            </div>
            <br><br>
            <div id="sortable">
            {% for category in categories %}
                <div class="row" class="draggable" style="border: 1px solid silver; margin-bottom: 3px; background-color: rgb(220, 220, 220)">
                    <div class="col-md-6" style="height: 35px;">
                        {{ category.id }}
                    </div>
                    <div class="col-md-3" style="text-align: center; height: 40px;">
                        {{ category.product_count}}
                    </div>
                    <div class="col-md-3" style="text-align: center; height: 40px;">
                        {{ category.popularity|default(0) }}
                    </div>
                </div>
            {% endfor %}
            </div>
        </div>
    </div>

问题是它不起作用。当我使用id而不是类作为可拖动元素时，只能移动第一个元素......并且它没有被排序。当它看起来像现在，所以当我使用一个类时，没有任何作用。 jQuery代码是：

$('#sortable').sortable();
            $('.draggable').draggable({
                connectToSortable: "#sortable"
            });

会发生什么，为什么会这样？谢谢！

Answer 1

你可以试试这个

$('#sortable').sortable(
{
   items: ".draggable"
});

可拖动+可排序菜单

1 个答案: