mfuu / vue-virtual-drag-list Goto Github PK

Hi

First of all, thank you for the hard work in this component. It's the closest and best-maintained solution I've found so far in terms of combining a virtual list with draggable items.

I'm doing a proof-of-concept to see if it works well but I'm running into issues with the draggable part.

Code snippet for reference:

<virtual-drag-list
      :data-key="'id'"
      :data-source="queue"
      :draggable="editing"
      @top="scrolledToTop"
      @bottom="scrolledToBottom"
      @ondragend="sortQueue"
    >
      <template slot="item" slot-scope="{ record }">
        <div class="sortable-item" draggable="true">
          <list-item :item="record" />
          <div class="sort" v-if="editing">
            <i class="f7-icons">sort_ios</i>
          </div>
        </div>
      </template>
    </virtual-drag-list>

The items should only be draggable after the user clicks a button that sets editing to true.

When I put draggable="true" on the entire div class="sortable-item"> it does allow dragging (sometimes) but it's very picky on where I select the item. It can only be selected in areas that are not taken by any children elements (e.g. whitespace areas).

Preferably, I'd like only the <div class="sort"> which contains an icon to allow dragging. I tried 2 things:

Putting draggable="true" on the <div class="sort"> and on the <i class="f7-icons">. Both options do not allow me to drag, although it looks like I can drag the icon itself while I hold down the mouse button. Every time I try to drag I see the following error in the logs:

index.js?ef2b:223 Uncaught TypeError: Cannot read properties of undefined (reading 'left') at Draggable._handleMousedown (index.js?ef2b:223:1)

Any ideas on how to get this to work properly?

Thank you!

Hello mfuu

it looks like

please check https://codesandbox.io/s/gracious-mirzakhani-69wgsy?file=/src/components/HelloWorld.vue codesandbox

the classes 'red-background' and 'hover-background' not applied!

did I do some syntax error?

webview Error

Can it adapt to Angular?

In src/index.js the render is being provided start and end indexes of the array and those are used in the slicing as such: list.slice(start, end).

BUT:

The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.

Note the "end not included" part. That means the displayed list will not include the last item as soon as the dataSource updates and triggers a list update, or when there's more than keeps items (which defaults to 30) in the list and the user scrolls.

The correct code is therefore: list.slice(start, end + 1)

Hi mfuu,
Thank you for fixing the last issue v-model.

Recently I used the latest version and ran into another problem. In contrast to vue-draggle component library, which can support pull=clone mode but can't support virtual scrolling, vue-virtual-drag-list is a component that allows list groups to be cloned without adding new elements (put:false,pull:'clone'). Another list group can drag elements can also add elements (put: true/add, pull: true/remove).

See if you need to enhance the functionality of this component

Hi,

First of all thanks a lot for your work on this library. It might be something I need to test if it works for my usecase. I have one question in mind. Does it support body scrolling and if not would it be something you would consider to support in the future? Here's a demo from another library that does virtual list.

Page mode virtual list

Hello mfuu,
thank you for this great library!

is it possible to drag-drop an item between two lists?

please note that the lists I have they load more content for API when reach the bottom of the already loaded lists.

if you think that possible then I will spend my time on that to make it work (any advise is highly appreciated )

if you think that is not possible then just let me know please.

Hello mfuu,

I need to pass a style to the header slot.

do you think it is possible to add two extra props (headerStyle and footerStyle)?

I will make a pull request to you regarding this.

please note that I am not familiar with "Vue render function".

Hello mfuu,

I used this great component in my Vue2 production project, and I am thankful for your amazing efforts.

I had issue when the nested data passed through "data-source" were changed.
they new data is not shown in the DOM

I used the technique of : changing the value inside 'data-key' ('id' in my case) to id= ${row.id}-${Math.random()}` for each row.

but that doesn't make the DOM update.

I had look to your code, and I can see that you used 'watch' for 'dataSource.length' to update the DOM

so I add my own 'watch' to "data-source" and to enforce the DOM update I add a temporary row to "data-source" then remove it in the nextTick.
that work. but maybe you have a better way to suggest for me to use?

also I am going to migrate to Vue3 soon. so you think the issue will be resolve by itself after moving to Vue3 ?

我使用example同样代码修改 父组件以及左右两个vue-virtual-drag-list`子组件
两个子组件使用源数据：leftData（一万个元素）,rightData（三个元素）
遇到如下几个疑问：

1. 两个group其中一方没有数据而无法拖拽进去，需要额外添加wrapClass style height属性
2. 数据拖拽完成后，似乎右侧数据限制显示,dataources保持初始化不变：如下：
   视图显示初始化三个元素，经过drag操作 组件内部属性 list数据已经包含九个元素
[{"label":"名称：1","value":1,"id":1},{"label":"名称：32","value":32,"id":32},{"label":"名称：3","value":3,"id":3},{"label":"名称：35","value":35,"id":35},{"label":"名称：7","value":7,"id":7},{"label":"名称：34","value":34,"id":34},{"label":"名称：4","value":4,"id":4},{"label":"名称：2","value":2,"id":2},{"label":"名称：39","value":39,"id":39}]
   其中组件
   

{"start":0,"end":2,"front":0,"behind":0}
应该是导致右侧group只呈现三个元素原因，但是不知道为什么range属性drag操作后没有变化
3. vue-virtual-drag-list组件不会更新源数据，上述问题2右侧显示 我遇到后我只能想办法强更新组件数据源使得

• vue-virtual-drag-list组件一直在随着数据源更新刷新

• 所以拖拽完成后，我在drop回调事件获取最终的list emit event更新父组件源数据，(PS: 因为我父组件操作依赖于源数据leftData,rightData（需操作后的list）进行), 我vue-virtual-drag-list子组件同时添加watch 源数据想要同步更新，不过这会导致性能问题 拖拽迟滞感比较强烈 ，因为子组件在更新视窗内显示内容(vue-virtual-drag-list插槽内容)

This is the best virtual list for Vue I've seen for both drag-and-drop sorting and virtual rendering. I would like to appreciate the author's efforts before describing the bugs I encountered!

After half a month of use, I found a bug that when we drag and drop an item, the item must not belong to the last group of items. when I try to drag and drop the first item to the penultimate position of the list, something magical happens, and the last item suddenly disappears. Only after scrolling the wheel a little bit, the list will render correctly again. Also, If you just drag the first item to the bottom, you'll find it just disappear.
This problem can be reproduced in the link provided by the author. => Link here

The second bug is a rendering issue when the amount of data is small. When the number of items in the list of lists is so small that it doesn't need to be rendered in batches, let's say there are only 10 items, we have no problem at all with the initial loading. So it stands to reason that if we add a new item, then the page should display 11 items. unfortunately, adding a new item currently crowds out the last item. Until we add enough items, it will not be displayed correctly.

Hopefully the author will check out this issue sometime, very excited for the next update!

Hi mfuu,
thank you for this amazing library.

I think I found a bug.

when I pass :group="{ name: 'RulesGroup', put: false, pull: true }" to one list instance of group "RulesGroup".

then I dragged one row to that list instance, then it triggered event with "changed"= true.

I think it should be "changed"= false.

because the row will put back to its original list. and no change will accrue to any list

Hi, recently I started using this library in my web app, I really appreciate the efforce on building it.

I would like to add a new method to scroll to a specific id, i'm thinking maybe the library can scroll directly to the id based on the data-key attribute without need to findIndex.

I'll be attentive for comments/feedback

Hello mfuu,

this issue happen when I have a vertical list with one row (or rows not enough to have vertical scroll),
and that row always has a lot of data to show. then when there is horizontal scroll AND no vertical scroll, then the issue happen.

the "bottom" event will be triggered when scrolling to the right (which shouldn't happen). and the list will not update the view correctly when adding a second line.
both lines will be disappear.

thank you in advice for all your efforts.

I know that you are providing this amazing component for free.
but just to put you in the picture, I am using this component in production and now I have a lot of complains from the customers.
if that can be fix quickly then it will be great.

I looked to your code and it look like you always consider 'direction' cases.
nevertheless the issue exist.

if I can help in anyway then please let me know.

Some ui libs (for example Vuetify) drop component styles when sortable appended element into the document's body.

this.sortable = new SortableDnd(this.context.$refs.group, {
      ...props,
      fallbackOnBody: true,  // PROP IS MORE FLEXIBLE
      list: this.dynamicList,
      onDrag: ({ from }) => this._onDrag(from.node),
      onAdd: ({ from, to }) => this._onAdd(from, to),
      onRemove: ({ from, to }) => this._onRemove(from, to),
      onChange: ({ from, to }) => this._onChange(from, to),
      onDrop: ({ from, to, changed }) => this._onDrop(from, to, changed),
});

Will this component support vue 3?

You could use https://github.com/vueuse/vue-demi to make that happen :)

Hi mfuu, 我的项目中需要使用虚拟滚动列表和排序功能，然后我就发现了你这个伟大的开源贡献，非常感谢。
我在使用中发现一个奇怪的交互现象，可能不太符合预期，具体描述如下：
https://mfuu.github.io/vue-virtual-drag-list/ 在左侧列表中，把下面的item 往上拖，释放后，拖拽的那个item dom 消失了， 拖拽的越来越多，消失的dom 也越多，但是滚动列表后，item 又显示出来了。我不确定是不是因为Vue 做diff 的时候识别的key 有问题，还是其他的什么原因，render 函数里的this._renderItems(h) 返回的vNode 数量是对的，但是patch 后，dom 没有在页面中显示出来，我不确定是我使用的方式不对，还是我们代码实现中有bug，你能确认一下吗？
我也复制了一个可复现的codesandbox

When dragging an item in the list, it's not possible to put it back where it was taken from without putting it somewhere else first.

Use lodash/debounce when scrolling (handleScroll) to improve performance.

I'm using the @top and @bottom event callbacks to fetch more items depending on where the user is within the virtual list data. When triggering @top an HTTP call is done to fetch additional data and the list is updated. However, the list jumps to the first item in the updated result instead of staying at the beginning of the list before fetching additional items.

An example:

I'm displaying items 400 - 600 and the user scrolls to the top. Item 200 to 400 are being fetched. The top of the list is shown and item 200 is the first to be shown.

It would be nice if the list stays around item 400 and the user is able to scroll up towards 200.

Could this be added to the library as a configurable property?

As a workaround, I'm now storing the ID of the item in the list before fetching additional data and then using a watch to scroll back to the new index in the list based on the ID.