javascript - 在可排序的 Jquery UI 上拖动项目的问题

Question

我正在使用可排序的 jQuery UI 来允许用户在两​​个列表之间拖放，然后对项目进行排序，但是我有一个错误，从第一个列表中选择时，选择的内容不是全部div，只是后面的内容鼠标光标。

在此之后，会发生许多错误，例如我无法订购，移回第一个列表并且一切都无法撤消。

这是视图代码：

<div class="row col-md-12">
<div class="col-md-6">
    @foreach (var item in Model.Games.AvailableGamesStats.GameAchievements.Where(f => f.SectionID == null))
    {
        <div class="connectedSortable" id="achievements" style="margin-top:10px; margin-bottom:10px; z-index:1; cursor:move; height:60px">
            <img src="@item.Icon" style="float:left" />
            <b>@item.DisplayName</b><br />
            <i>@item.Description</i>
            @if (item.Difficulty != null)
            {
                <img src="@item.Difficulty.DifficultyImage" style="float:right; width:32px" />
            }
        </div>
    }
</div>
<div class="col-md-6">
    <div class="card" style="height:100%; z-index:0">
        <div class="card-header text-center" contenteditable="true">Name</div>
        <div class="card-body connectedSortable" id="chievo">
        </div>
    </div>
</div>

和 jQuery...

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

我尝试移动的第一个 div 项目是图像、标题和描述的集合，但是当我尝试移动时，只有一个项目移动，并且无法订购或撤消任何操作。

标签： javascriptjqueryjquery-ui