dragstart之后立即触发Javascript dragend事件

Question

我有一个重要的错误正在给我造成很多伤害。

我已经在Vue中完成了表单生成器组件。

它是由可拖动区域组成的，具有可拖动项目且外观友好：短答案，长答案，数字答案，单选框/复选框答案...

还有一个放置区域，我可以在其中放置这些可拖动的项目，以便将其推送到对象并组成表单预览。

这是我最终目标的一些介绍。一切正常，但任何事件我都没问题……可拖动区域中有一个错误。有时，我无法建立定义正在发生的事情的路径。有时，我重复一遍，当我开始拖动并且触发了dragstart事件（在该事件中放置了console.log）时，在按下主按钮的同时立即触发了dragend事件（我也看到了该事件我在dragend处理程序中输入的console.log。）>

我无法复制它。而且，它不介意我从可拖动区域中拖动哪种字段类型。我已经看到有一个Chrome错误，但已修复（我认为！）。

我的Chrome版本为：版本78.0.3904.108（正式版本）（64位）

，而以前的版本存在问题（我想重复）。

我将显示我在做什么的伪代码。

DraggableArea.vue

<template lang='pug'>
  #draggable-area
    ul
      draggable-item(
        v-for='draggableField in draggableFields'
        :fieldInfoToBeDropped='draggableField.fieldInfoToBeDropped'
      )

</template>
DraggableItem.vue

<template lang='pug'>
  li(
    draggable='true'
    @dragstart.stop='handleDragstart'
    @dragend.stop='handleDragend'
    @drop.stop='handleDrop
</template>

export default {
  ...

  methods: {
    handleDragstart(e) {
      const fieldInfoToBeDropped = this.fieldInfoToBeDropped // this is an object which contains the information that drop zone will handle to create the field in the form object
      try {
        console.log('DraggableItem, handleDragstart event:', e)
        setTimeout(() => { this.$el.classList.add('drag') }, 10)
        e.dataTransfer.clearData()
        const fieldObjectStr = JSON.stringify(fieldInfoToBeDropped)
        e.dataTransfer.setData('fieldObject', fieldObjectStr)
      } catch (err) {
        console.log('DraggableItem, handleDragstart error:', err)
        this.$el.classList.remove('drag')
        e.dataTransfer.clearData()
        e.preventDefault()
      }
    },

    handleDragend(e) {
      console.log('DraggableItem: dragend fires')
      this.$el.classList.remove('drag')
      e.dataTransfer.clearData()
    },

    handleDrop(e) {
      this.handleDragend(e)
    }

  }
fieldInfoToBeDropped的示例。它更改了id（动态生成的id，componentType和iconName）。

{
 componentType:"text",
 name:"",
 description:"",
 iconName:"text",
 id:"field_1575448385646rgzh6hhh6",
 mandatory:true
}
我没有注意到该问题在其他浏览器中存在，但是我没有像在Chrome中那样尝试过。

谢谢！

我有一个重要的错误正在给我造成很大的伤害。我已经在Vue中完成了表单生成器组件。它由可拖动区域组成，带有可拖动项且外观友好：简短答案，...

Answer 1

我解决了这个问题。