在 dragstart 后立即触发 Javascript dragend 事件答案

【问题标题】：Javascript dragend event fired immediatly after dragstart在 dragstart 后立即触发 Javascript dragend 事件
【发布时间】：2020-03-29 01:16:26
【问题描述】：

我有一个重要的错误，对我造成了很大的伤害。

我在 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（即动态生成的 componentType 和 iconName）。

{
 componentType:"text",
 name:"",
 description:"",
 iconName:"text",
 id:"field_1575448385646rgzh6hhh6",
 mandatory:true
}

我没有注意到其他浏览器中存在问题，但我没有像在 Chrome 中那样尝试过。

谢谢！

【问题讨论】：

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

【解决方案1】：

我解决了这个问题。

我在拖动项目时隐藏了一些内容，因此窗口高度小于原始高度。这意味着滚动出现和消失，移动我的光标并触发 drop 事件。

它只发生在谷歌浏览器中

【讨论】：

嘿！我也面临这个问题。你是怎么解决的？