После каждого перетаскивания вставьте новую строку в таблицу, чтобы принять следующее перетаскивание - мой код работает только при первом перетаскивании - PullRequest
Новая
       9

После каждого перетаскивания вставьте новую строку в таблицу, чтобы принять следующее перетаскивание - мой код работает только при первом перетаскивании

0 голосов
/ 08 апреля 2020

Когда я перетаскиваю элемент, я хочу вставить новую строку в таблицу, чтобы в конце принять следующее перетаскивание. В моем коде ниже это работает только один раз. При втором перетаскивании новая строка не вставляется в таблицу. Последняя строка кода ниже вставляет новую строку: 

($('#activity2Tablebody').append("<td><div class='droppableItem'></td>");).

function makeDraggable() {
    $('.dragabbleItem').draggable({
        stack: ".dragabbleItem",
        cursor: 'pointer',
        helper: 'clone',
        drag: function( event, ui ) {
            //Make the row/field being dragged to droppable
            makeDroppable();
        }
    });
}

function makeDraggableRemove() {
    //This item will be deleted when dragged
    $('.dragabbleRemove').draggable({
        cursor: 'pointer',
        drag: function( event, ui ) {
            //Remove this row from the table
            $(this).remove();           
        }
    });
}

function makeDroppable() {
    $('.droppableItem').droppable({
        hoverClass: 'hovered',
        drop: function( event, ui ) {
            var droppable = $(this);
            var draggable = ui.draggable;
            alert( 'The item with ID "' + draggable.attr('id') + '" was dropped onto me!' );
            // Move draggable into droppable
            var drag = $('.droppableItem').has(ui.draggable).length ? draggable : draggable.clone().draggable({
                revert: "invalid",
                stack: ".dragabbleItem",
                helper: 'clone'
            });
            //Add the dragged item to the row/field
            drag.appendTo(droppable);
            //Stop the dropped item from being draggable
            drag.draggable('disable');
            //Format the row/field dropped into with a blue background
            droppable.css({top: '5px', left: '5px', background: '#B0C4DE'});
            //Do not allow another item to be dropped into this row/field
            droppable.droppable('disable');
            //If this row/filed is dragged then remove it
            droppable.addClass("dragabbleRemove");
            makeDraggableRemove();
            //Add a new row/field to drag to
            $('#activity2Tablebody').append("<td><div class='droppableItem'></td>");
        } 
    });
}

1 Ответ

1 голос
/ 08 апреля 2020

Вы должны добавить в тело таблицы <tr><td> - строку и ячейку таблицы, а не только <td>

...