javascript - Vue Draggable - How to only replace item chosen to prevent shifting all other items on grid? - Stack Overflow

admin管理员组

文章数量:1426594

Here's an example to test: =/src/App.vue:112-116

Step 1: Drag 4 to 5. As you see, 4 and 5 switch places

Step 2: Drag 1 to 6, as you see, 1 goes where 6 was, 6 gets pushed to the side, and 2, 3, 4, and 5 all shift over.

I would like though is to keep existing items untouched, moving 1 and 6 should move 1 to 6 and 6 to 1 space on the grid. All other items should remain in their spaces.

I have tried using sort=false this had no effect, and without a group=, it disables all dragging.

Is this possible?

I'd like the items in the grid to be stationary and only moved based on desired selection. If I'm not using the right tool, is there something else that could acplish this? Think about if the grid was icons, it does make a good UI when moving icons to a selection and then all the previous icons automatically shift over. Would be very annoying to the user.

Hope this makes sense, if you need more details, ment below and I'll revise/update as needed.

Here's an example to test: https://codesandbox.io/s/j4vn761455?file=/src/App.vue:112-116

Step 1: Drag 4 to 5. As you see, 4 and 5 switch places

Step 2: Drag 1 to 6, as you see, 1 goes where 6 was, 6 gets pushed to the side, and 2, 3, 4, and 5 all shift over.

I would like though is to keep existing items untouched, moving 1 and 6 should move 1 to 6 and 6 to 1 space on the grid. All other items should remain in their spaces.

I have tried using sort=false this had no effect, and without a group=, it disables all dragging.

Is this possible?

I'd like the items in the grid to be stationary and only moved based on desired selection. If I'm not using the right tool, is there something else that could acplish this? Think about if the grid was icons, it does make a good UI when moving icons to a selection and then all the previous icons automatically shift over. Would be very annoying to the user.

Hope this makes sense, if you need more details, ment below and I'll revise/update as needed.

• javascript
• vue.js
• vuedraggable

Share Improve this question Follow edited Aug 16, 2020 at 4:22 tmarois asked Aug 16, 2020 at 4:03 tmaroistmarois 2,46033 gold badges3131 silver badges4444 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

While vuedraggable does not provide swapping by default https://github./SortableJS/Vue.Draggable/issues/466 , there's a great article that explains how to implement it yourself.

This is your modified code sandbox https://codesandbox.io/s/vuedraggable-with-css-grid-forked-wk4xk

Basically, you need to implement the swapping behaviour yourself by storing the current and future indexes (note, I changed the name of your list to "items" just to make it easier to port the code in the article).

<draggable v-model="items" :move="handleMove" @end="handleDragEnd">

In your script

methods: {
    handleDragEnd() {
      this.futureItem = this.items[this.futureIndex];
      this.movingItem = this.items[this.movingIndex];
      const _items = Object.assign([], this.items);
      _items[this.futureIndex] = this.movingItem;
      _items[this.movingIndex] = this.futureItem;

      this.items = _items;
    },
    handleMove(e) {
      const { index, futureIndex } = e.draggedContext;
      this.movingIndex = index;
      this.futureIndex = futureIndex;
      return false; // disable sort
    }
  }

本文标签：