javascript - 无法成功将元素从一个 div 单独拖放到另一个 div

Question

我希望创建两个容器，第一个容器包含要在用户希望时拖放到第二个容器的元素。我实际上成功地显示了带有各自元素的两个容器，但是当我尝试将其中一个分别拖到第二个容器时，整个 block 继续移动。

下面是我的代码:

$(document).ready(function () {

    $('.box-item').draggable({
        cursor: 'move',
        helper: "clone"
    });

    $("#container1").droppable({
        drop: function (event, ui) {
            var itemid = $(event.originalEvent.toElement).attr("itemid");
            $('.box-item').each(function () {
                if ($(this).attr("itemid") === itemid) {
                    $(this).appendTo("#container1");
                }
            });
        }
    });

    $("#container2").droppable({
        drop: function (event, ui) {
            var itemid = $(event.originalEvent.toElement).attr("itemid");
            $('.box-item').each(function () {
                if ($(this).attr("itemid") === itemid) {
                    $(this).appendTo("#container2");
                }
            });
        }
    });

});

/* Styles go here */

.box-container {
    height: 200px;
}

.box-item {
    width: 100%;
    z-index: 1000
}

<div class="row">

    <div class="col-lg-11">

        <div class="row">
            <div class="col-lg-12">
                @using (Html.BeginForm("", "", FormMethod.Post, new { id = "formAssignVehicles" }))
                {
                    <fieldset>
                        <legend>Affecter des voitures par glisser-déposer</legend>
                        @{ }
                                    <div class="col-xs-3">
                                        <div class="panel panel-default">
                                            <div class="panel-heading">
                                                <h3 class="panel-title">Liste des véhicules</h3>
                                            </div>
                                            <div id="container1" class="panel-body box-container">
                                                @foreach (var voiture in Model.ListeVoituresAffectees)
                                                {
                                                    <div itemid="itm-1" class="btn btn-default box-item">
                                                        @Html.DisplayFor(model => voiture.MarqueVoiture.Libelle)
                                                    </div>
                                                }

                                            </div>
                                        </div>
                                    </div>
                               

                                    
                                    <div class="col-xs-3">
                                        <div class="panel panel-default">
                                            <div class="panel-heading">
                                                <h3 class="panel-title">Liste des véhicules affectées</h3>
                                            </div>
                                            <div id="container2" class="panel-body box-container"></div>
                                        </div>
                                    </div>

                        <input type="button" value="Affecter les voitures" />
                    </fieldset>
                }
            </div>
        </div>

    </div>
</div>

不知道错在哪里。请帮忙，请!

Answer 1

在您的 @foreach 语句中，所有元素都被赋予相同的 itemid “itm-1”，因此它们都受到相同的影响。想办法给每个人一个唯一的 itemid，这应该可以解决问题。