Draggable preventing scroll behavior

[KrlosDev]

Hello, i'm having an issue with Draggable, maybe it's my lack of experience but, in the following component, when i export draggable the scroll events stop working

    <div class="d-flex">
        <small class="text-start w-100 " :id="`list_title.${listData._id}`" @click.prevent="changeListTitle(listData._id, true)" style="cursor: pointer">{{ listData.name
            }}</small>
        <input type="text" class="w-100 rounded-1 list_title d-none p-1"
            :id="`edit_list.${listData._id}`" :value="listData.name"
            @focusout="changeListTitle(listData._id, false)">
        <small class="mx-2 px-2 rounded-1 d-flex box-center text-white"
            style="background-color: #7a7a7a61;width: 1.5rem; height: 1.5rem;cursor: default;" v-if="listData.cards">{{ listData.cards.length
            }}</small>
    </div>
    <div>
        <!-- <ListDropdown :watch="seeWatchList(listData.watch)" :listId="listData._id"
            @changeWatch="changeWatch" @deletedList="deletedList"/> -->
            <ListDropdown :watch="seeWatchList(listData.watch)" :listId="listData._id" @deletedList="deletedList"  @changeWatch="changeWatch"
            />
    </div>
  </div>
  <!--CARDS-->
  <Draggable
    ref="cardContainer"
    class="list-column mx-1 d-grid"
    ghost-class="ghost"
    :list="listData.cards"
    group="people"
    v-bind="dragOptions"
    :touch-action="'pan-y'"
    :data-list="listData._id"
    :data-name-list="listData.name"
    @end="onListDrop"
  >
    <transition-group
      type="transition"
      class="bg-transparent w-100 h-100 p-1"
      name="flip-list"
    >
      <div class="cards m-1 mx-auto rounded-2" v-for="card in visibleCards" :class="{ cards_dark: currentTheme === 'theme-dark' }" :id="card" :key="card" :data-list="listData._id" :data-name-list="listData.name"
      :data-fielder="[card.fielders]" :data-QC="[card.QCs]"
      :data-estimator="[card.estimators]"  @click.right="showSidedropdownCard(card, true)" oncontextmenu="return false">
       
        <!-- <div class="d-none py-3 rightClick_dropdown bg-transparent" :class="{ 'menu_board_dark': currentTheme === 'theme-dark' }" :id="`rightClickCard.${card}`" style="z-index: 10;">
            <RightClickDropDown :card="card" @closeRightClick="closeRightClick" :currentTheme="currentTheme" :roles="roles" :project="newProject" :userInvited="newProject.members" @addedDueDateToCard="addedDueDateToCard" @addedEODDateToCard="addedEODDateToCard" @addComment="addComment" @archive="archive"
            @addedPriorityToCard="addedPriorityToCard" @addedAssigneeToCard="addedAssigneeToCard"
            @addedLabelToCard="addedLabelToCard"  @deleteCard="deleteCard"/>
        </div> -->
        <Card :currentTheme="currentTheme" :card="card" @openModal="openModal" />

      </div>
    </transition-group>
  </Draggable>
  <!--CARDS-->
  <!-- ADD CARD -->
  <AddCard :listId="listData._id" :projectId="projectId" @addCard="addCard" :currentTheme="currentTheme" />
  <!-- ADD CARD -->

</div>

<script> import Draggable from "vuedraggable"; import Card from "./card.vue"; import AddCard from './add_card'; import ListDropdown from './list_dropdown' export default { components: { Card, AddCard, ListDropdown, //Draggable }, props: { currentTheme: String, list: String, }, data() { return { listData: "", cardContiner:null, visibleCards: [], // An array to store the currently visible cards startIdx: 0, // Start index of the visible cards numCardsToShow: 20, // Number of cards to show at once }; }, methods: { openModal(event) { this.$emit('openModal', event); }, async getListData() { let operationData = { listId: this.list, user_id: this.$session.get("userid"), }; setTimeout(() => { fetch(`${this.$API_BASE_URL}/project/get_lists`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(operationData), }) .then((response) => response.json()) .then((data) => { this.listData = data.list[0]; this.loadNextBatchOfCards() // console.log(this.startIdx, this.numCardsToShow) }) .catch((err) => console.log(err)); }); }, loadNextBatchOfCards() { const endIdx = this.startIdx + this.numCardsToShow; console.log(this.startIdx) console.log(endIdx) if (endIdx < this.listData.cards.length) { // Add the next batch of cards to the visibleCards array this.visibleCards = this.visibleCards.concat( this.listData.cards.slice(this.startIdx, endIdx) ); // Update the start index for the next batch this.startIdx = endIdx - 10; // console.log(this.startIdx) } }, handleScroll() { const container = this.$refs.cardContainer; if (container) { const scrollTop = container.scrollTop; const scrollHeight = container.scrollHeight; const clientHeight = container.clientHeight; if (scrollTop + clientHeight >= scrollHeight) { // User has reached the bottom, load the next batch of cards this.loadNextBatchOfCards(); } // // Check if the user has scrolled to the top // if (scrollTop === 0) { // alert("You are at the top of the container!"); // } } }, showSidedropdownCard(id, show) { if (show) { document.getElementById(`rightClickCard.${id}`).classList.remove("d-none"); document.getElementById(`rightClickCard_bg`).classList.remove("d-none"); } else { document.getElementById(`rightClickCard.${id}`).classList.add("d-none"); document.getElementById(`rightClickCard_bg`).classList.add("d-none"); } }, changeListTitle(id, show) { if (show) { document.getElementById(`edit_list.${id}`).classList.remove("d-none"); document.getElementById(`list_title.${id}`).classList.add("d-none"); } else { const value = document.getElementById(`edit_list.${id}`).value; let list_title = { projectId: this.$route.params.projectid, list_id: id, user_id: this.$session.get('userid'), title: value, } try { fetch(`${this.$API_BASE_URL}/project/change_list_name`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(list_title) }).then((response) => response.json()) .then((data) => { if (data.success) { // console.log(data.title); document.getElementById(`list_title.${id}`).innerText = data.title; } }) document.getElementById(`edit_list.${id}`).classList.add("d-none"); document.getElementById(`list_title.${id}`).classList.remove("d-none"); } catch (error) { console.log(error); } } }, seeWatchList(list) { try { const exist = list.includes(this.$session.get('userid')); return exist } catch (error) { console.log(error); } }, async onListDrop(event) { // console.log(event); // console.log(event.from.parentElement.dataset.list); // console.log(event.item.id); // console.log(event.to.parentElement.dataset.list); let positions = { card_id: event.item.id, new_list_id: event.to.parentElement.dataset.list, old_list_id: event.from.parentElement.dataset.list, user_id: this.$session.get('userid'), QCs: event.item.dataset.qc, fielders: event.item.dataset.fielder, estimators: event.item.dataset.estimator, } // console.log(positions); fetch(`${this.$API_BASE_URL}/project/cards_position`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(positions) }).then((response) => response.json()) .then((data) => { // console.log(data); if (data.success) { this.getListData(); this.socket.emit("userChangeCardPosition", data.notifications) // this.socket.emit("userChangeCardPosition", data.watchList) } }) .catch(error => { console.log(error); }); // axios.post(`${this.$API_BASE_URL}/project/cards_position`, positions) // .then(response => response.json()) // .then(data => { // if (data.success) { // } // }) }, }, async created() { this.getListData(); }, mounted() { // Attach the scroll event listener to the container this.cardContainer = this.$refs.cardContainer; this.cardContainer.addEventListener("scroll", this.handleScroll); }, beforeDestroy() { // Remove the scroll event listener when the component is destroyed this.cardContainer.removeEventListener("scroll", this.handleScroll); }, computed: { dragOptions() { return { animation: 200, disabled: false, ghostClass: "ghost", scroll: true, scrollSensitivity: 100, scrollSpeed: 10 } }, userInvited() { return this.newProject.members.slice(0, 5) }, }, watch: { showCheckboxes(newValue) { if (!newValue) { this.selectedCards = []; // Clear the array when checkboxes are disabled } } } }; </script> <style> .list-column { min-width: 270px; max-width: 300px; overflow-y: auto; } </style>

[napstar-420]

Format your code