Получить идентификатор упавшего div, используя JavaScript-файл dragula

Question

Я пытаюсь обновить диаграмму c3.js с помощью перетаскивания с помощью dragula.js, но я не знаю, как получить идентификатор div, который перетаскивается в новый контейнер. Мой HTML это что-то вроде этого:

<div id="collapse1" class="panel-collapse collapse">
    <div id="color1" class="form-inline">1</div>
    <div id="color2" class="form-inline">2</div>
    <div id="color3" class="form-inline">3</div>
</div>
<div id="collapse2" class="panel-collapse collapse">

</div>

и я использую dragula.js для перетаскивания:

dragula([collapse1,collapse2]);

Я действительно новичок в jquery, но после этого вопроса, чтобы получить доступ к идентификатору <div> упал в collapse2 Я пытался сделать что-то вроде этого:

alert($("#collapse1.collapse2 div:first").attr("id"));

Но результатов нет. Любая помощь могла бы быть полезна

Answer 1

У Драгулы есть три Элемента. Один - это Источник Div, Target Div и связанный с ним Элемент. Следующий метод работает для меня как обаяние, за исключением того, что я не использую метод get(), у которого есть проблема с версией. Вы можете попробовать оба. Dragula дает вам идентификатор упавшего div, Source Div, Target Div.

   const dragula = Dragula(['', '']);
      dragula.on('drop', (el, target, source, sibling) => {
        const elementId = $(el).attr("id");
        const targetID = $(target).attr("id");
        const sourceId = $(source).attr("id");
}

Answer 2

Не могу ответить на вопрос напрямую, потому что я не знаком с Драгулой. Тем не менее, я широко использовал jqueryUI drag drop, и это действительно хороший инструмент. Возможно, вы захотите попробовать эту структуру.

Поскольку вы попросили привести пример, я покопался в своем старом коде. Возможно, вы захотите просмотреть обучающие руководства jqueryUI с возможностью перетаскивания, чтобы дать вам некоторое представление, прежде чем смотреть на это. Я включил части функции. Я поставил маленькие точки, чтобы показать вам, где код был опущен. Я поставил <<< рядом ключевых строк для вас. Обратите внимание, как я использую замыкание, чтобы сделать ссылки доступными для разных частей. Закрытие тааак потрясающе. Я оскорбляю смерть из-за этого, так что научитесь использовать ее, если можете.

Обратите внимание, что как только я получил объект перетаскивания, это то, что вы просите. Обратите внимание, как я ссылаюсь на переменную для своей функции позже, когда я регистрирую перетаскиваемый объект.

Кстати, обратите внимание, что есть также ссылка на функцию перетаскивания, определение которой я не показываю. Если вы переместите объявление dragObject за пределы startDrag, то вы также можете увидеть его из stopDrag, так как определение функции "включено" во внешнюю функцию регистра.

function tapeChart_registerDraggables(parentObject,scope) {

    if ((parentObject==null)||(parentObject==undefined)) {
        parentObject=$jq(document.body);
    }

    var availablesShow = false;
    var savingToServer = false;
    var dragClone = null;

    var startDrag = function(event, ui) {

        tapeChartDraggingReservation = true;

        var dragObject = event.target;  <<<<<<

       if (dragObject.getAttribute("unassigned")=="true") {
            var is_chrome = window.chrome;
            var is_safari = navigator.userAgent.toLowerCase().indexOf('safari/') > -1;
            if (!is_chrome && !is_safari) {
                $(ui.helper).css("margin-left", event.clientX - $(dragObject).offset().left);
                $(ui.helper).css("margin-top", event.clientY - $(dragObject).offset().top);               
            }
        }

        ...

        // assigned rooms
    if (scope!="UNBLOCKED") {
        // register items in the grid
        $(parentObject).find( ".NODRAGHELPER" ).draggable(
            {   
                snap : "true",                
                revert : "invalid",
                start: startDrag,  <<<<
                stop: stopDrag
            }
        )
        .click(function(){
            if ( $(this).is('.NODRAGHELPER-dragging') ) {
                return;
            }

            // seems that the user can drop and click fast
            // prevent this
            if (!savingToServer) {
                tapeChart_getReservation(this);
            }
            return false;
        });
    }

    ...