Не удается перетащить элементы из одного элемента в другой по отдельности - PullRequest
Новая
       8

Не удается перетащить элементы из одного элемента в другой по отдельности

0 голосов
/ 24 января 2019

Я хочу создать два контейнера с первыми содержащими элементами, которые нужно перетаскивать во второй, когда пользователь пожелает. Мне действительно удается отобразить два контейнера с соответствующими элементами, но когда я пытаюсь перетащить один из них во второй контейнер отдельно, весь блок перемещается дальше.

Ниже мой код: 

$(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>

Не могу понять, где опечатка. Пожалуйста, помогите, пожалуйста!

1 Ответ

0 голосов
/ 24 января 2019

В вашем выражении @foreach всем элементам присваивается один и тот же itemid "itm-1", поэтому на них все влияют одинаково. Найдите способ дать каждому уникальный itemid, и это должно решить проблему.

...