First drag does not work for vue-smooth-dnd vuejs

Question

Below code contains a section for the drag and drop. div drag-block which needs to get drag, but it does not work on the first drag it does not drop. It starts to drop from we drag for the second time.

https://github.com/kutlugsahin/vue-smooth-dnd

<div>
   <Container
      @drop="onDrop"
      lock-axis="y"
      drag-class="drag-div"
      drop-class="drag-div"
      drag-handle-selector=".shelf-icon"
      :get-ghost-parent="getGhostParent"
      >
      <Draggable v-for="(link,index) in quick_links" :key="link.name">
         <div class="drag-block">
            <div class="order-number">{{ index + 1 }}</div>
            <div class="content-block">
               <div class="mx-ellipsis">{{ link.name }}</div>
               <small class="mx-color-secondary mx-ellipsis" style="width: 
                  250px;">{{ link.url }}</small>
            </div>
            <div class="shelf-icon">
               <i class="micon-handle-horizontal sort-icon"></i>
            </div>
         </div>
      </Draggable>
   </Container>
</div>

score 1 · Answer 1 · answered Oct 23 '19 at 07:05

There is a workaround for this problem, we can use some delay when init the wrapper instance in the mounted hook of the vue instance. Below is the code shows the example Thanks.

<template>
  <display-panel @closed="closeDialog">
    <template slot="content">
      <div>
        <div class="section-title">{{$t('edit_display_order')}}</div>
        <div class="divider branding-color" />
        <div
          class="display-order-edit-info"
        ></div>
        <div class="drag-drop-container">
          <Container
            v-if="showDragContainer"
            ref="quickLinkDragDrop"
            @drop="onDrop"
            lock-axis="y"
            drag-class="drag-div"
            drop-class="drag-div"
            drag-handle-selector=".shelf-icon"
            :get-ghost-parent="getGhostParent"
          >
            <Draggable v-for="(link,index) in items" :key="link.name">
              <div class="drag-block">
                <div class="order-number">{{ index + 1 }}</div>
                <div class="content-block">
                  <div class="ellipsis">{{ link.name }}</div>
                  <small class="color-secondary ellipsis" style="width: 250px;">{{ link.url }}</small>
                </div>
                <div class="shelf-icon">
                  <i class="micon-handle-horizontal sort-icon"></i>
                </div>
              </div>
            </Draggable>
          </Container>
        </div>
      </div>
    </template>
  </display-panel>
</template> 

<script>

import { Container, Draggable } from 'vue-smooth-dnd'
export default {
  name: 'DragComponent',
  components: {
    Container,
    Draggable
  },
  props: {
    itemLinks: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    setTimeout(() => {
      this.showDragContainer = true
    }, 300)
  }
}
</script>

First drag does not work for vue-smooth-dnd vuejs

1 Answers1