Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

cant move drag items from one list to another #5

Open
theSilverFisch opened this issue Apr 25, 2023 · 10 comments
Open

cant move drag items from one list to another #5

theSilverFisch opened this issue Apr 25, 2023 · 10 comments

Comments

@theSilverFisch
Copy link

theSilverFisch commented Apr 25, 2023

I managed to set up two virtual lists which can also be sorted already. But apparently I can't move items between two lists even if I have them configured to be in the same group. The Sorting, also it works visually, does not trigger the set function in my computed vue variable which is the data-source for the virtual list. My simplified Setup is the following.

template:

<td>                
   <virtual-list class="virtualScroller" :keeps="10" :size="150"
                  :group="{ name: 'group', put: true, pull: true }"
                  :data-key="'docUUID'" 
                  :data-source="batchOne" 
                  :chosen-class="chosen"
                   :draggable="'#drag'">
                  <template v-slot:item="{ record, index, dataKey }">
                    {{ index }}
                    <someComponent id="drag" />
                  </template>
   </virtual-list>
</td>
<td>                
   <virtual-list class="virtualScroller" :keeps="10" :size="150"
                  :group="{ name: 'group', put: true, pull: true }"
                  :data-key="'docUUID'" 
                  :data-source="batchTwo" 
                  :chosen-class="chosen"
                   :draggable="'#drag'">
                  <template v-slot:item="{ record, index, dataKey }">
                    {{ index }}
                    <someComponent id="drag" />
                  </template>
   </virtual-list>
</td>

vue:

const batchTwo = computed( {
  return {
    get() {
      return items.value.query.vScrollItems.filter(item => {
        if (item.isBatchOne) return false
        return true
      })
    },
    set(newValue) {
      debugger
    },
  }
})
const batchOne =computed( {
  return {
    get() {
      return items.value.query.vScrollItems.filter(item => {
        if (item.isBatchTwo) return false
        return true
      })
    },
    set(newValue) {
      debugger
    },
  }
})
@mfuu
Copy link
Owner

mfuu commented Apr 26, 2023

@theSilverFisch Currently, only vue2 is supported. vue3 will be updated as soon as possible.

@theSilverFisch
Copy link
Author

@theSilverFisch Currently, only vue2 is supported. vue3 will be updated as soon as possible.

Do you have an estimate on when you will have resolved the vue3 specific issues? So far I could just see the vue warning issue and the missing drag and drop functionality between two lists as well as the issue that setters in computed variables which are used as data-source are not used when changing the data-source array

mfuu pushed a commit that referenced this issue Apr 27, 2023
@mfuu
Copy link
Owner

mfuu commented Apr 27, 2023

@theSilverFisch Please update to the lasted version to support this iuuse. Thank you for your patience

@theSilverFisch
Copy link
Author

@theSilverFisch Please update to the lasted version to support this iuuse. Thank you for your patience

Moving items between lists works now! But when I use a computed variable with a getter and a setter as the data-source for the virtual-list I still dont get the setter function called after moving items from one list to another. I also get an error as the 'record' in
<template v-slot:item="{ record, index, dataKey }">

gets emptied for all list items after droping a new item it that list

@mfuu
Copy link
Owner

mfuu commented Apr 28, 2023

I'll deal with it when I get back from the holiday. Thank you for your patience.

@theSilverFisch
Copy link
Author

theSilverFisch commented May 15, 2023

I'll deal with it when I get back from the holiday. Thank you for your patience.

Do you have a time estimate?

mfuu pushed a commit that referenced this issue May 18, 2023
* Add props `fallbackOnBody`, `pressDelay`, `pressDelayOnTouchOnly`
* Support `v-model:dataSource` to solve: #5 (comment)
@mfuu
Copy link
Owner

mfuu commented May 18, 2023

@theSilverFisch
Sorry for the late reply. Please update to the lasted version and change the props use with :dataSource="items" to v-model:dataSource="items"

@theSilverFisch
Copy link
Author

theSilverFisch commented May 23, 2023

The setter in my computed vars is still not triggered. The only change I see is that the drag source and target list is empty after I dropped an Item. But just visually until I resize the window, the model value stays untouched

@mfuu
Copy link
Owner

mfuu commented May 24, 2023

@theSilverFisch
Could you provide test case code, similar to codesandbox?

@isavvaidis
Copy link

Dear mfuu
The component is awesome.
When we change an item from one list to another or even in the same list, our model is updated only when the drop event is finished. Which is not useful because we want to run some functions on the updated model.
Do you have any event that is triggered when everything is done? (Like an "end" event or something similar)

Thank you in advance.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants