mfuu / vue3-virtual-drag-list

A virtual scrolling list component that can be sorted by dragging, for vue3
https://mfuu.github.io/vue3-virtual-drag-list/
MIT License
38 stars 11 forks source link

cant move drag items from one list to another #5

Open theSilverFisch opened 1 year ago

theSilverFisch commented 1 year ago

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 commented 1 year ago

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

theSilverFisch commented 1 year ago

@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 commented 1 year ago

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

theSilverFisch commented 1 year ago

@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 commented 1 year ago

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

theSilverFisch commented 1 year ago

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

Do you have a time estimate?

mfuu commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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

isavvaidis commented 1 year ago

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.