Изменение размера с помощью перетаскивания, Bootstrap, ваниль Javascript - PullRequest
Новая
       4

Изменение размера с помощью перетаскивания, Bootstrap, ваниль Javascript

0 голосов
/ 27 марта 2020

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

Карты успешно перетаскиваются, однако размер карт уменьшается и уменьшается. Я не уверен, если это проблема, связанная с Bootstrap классами. У меня сложилось впечатление, что сетка Bootstrap, строки + col-6/12 / et c, могла бы «защелкнуться» картами самостоятельно.

Я прикрепил скриншоты ниже до (как они должны выглядеть и как выглядят при загрузке страницы) и после (как перетаскивание вызывает уменьшение / изменение размера).

Я впервые работаю с функцией перетаскивания, и я ценю помощь! 


   <!-- START OF ACTUAL PAGE CONTENT-->
    <div class="container-fluid mt--6">
        <div class="row">

//the left part of the page is the container that should hold all the cards
            <div class="col-12 col-lg-8" id="target" ondrop="drop(event)" 
              ondragover="allowDrop(event)">

                <!--CARDS-->
                <div class="row ">

                    <!--first card-->
                    <div class="col-12 col-md-6 xbuttonCard draggable" 
                      id="pendingEstCard" ondragstart="drag(event)"


/////////////////////////////////////////////////////////////////

   //drag/drop functions
    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
        ev.dataTransfer.clearData();
    }

    //onclick function uses param to get Card ID
    const dragThis = (id) => {
        //attached dragstart eventlistener to parent Card
        let cardToDrag = document.getElementById(id);
        cardToDrag.addEventListener('ondragstart', drag)
    };

ДО BEFORE

ПОСЛЕ AFTER

...