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

1 Answer 1

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
    }
  }