第一次拖动不适用于 vue-smooth-dnd vuejs答案

【问题标题】：First drag does not work for vue-smooth-dnd vuejs第一次拖动不适用于 vue-smooth-dnd vuejs
【发布时间】：2020-01-21 11:20:47
【问题描述】：

下面的代码包含一个用于拖放的部分。需要拖动的 div 拖动块，但它在第一次拖动时不起作用。它从我们第二次拖动开始下降。

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>

【问题讨论】：

标签： vue.js drag-and-drop vue-component draggable drag

【解决方案1】：

这个问题有一个解决方法，我们可以在 vue 实例的挂载钩子中初始化包装器实例时使用一些延迟。下面是显示示例的代码谢谢。

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

【讨论】：