Javascript 防止在firefox上拖放，以在非目标输入中拖放可拖动的数据（Symfony-无Jquery，只有vanilla js）

我的问题是，我的应用程序中有一个拖放功能，可以在一个

中拖动

，然后将它们放到另一个

工作非常好。。。但是，在firefox上，如果我将我的

放在

上（没有
ondrop
属性），则在
onDragStart
过程中存储的数据将设置在输入中（不在Chrome上）。
有没有办法防止这种情况发生

我的树枝：

    <div class="formSheet">

  <div>
    <h1 class="formTitle pathTitle">Création de parcours</h1>
  </div>

  {{form_start(pathForm)}}

  <fieldset class="formFieldset">
    <legend class="pathLegend">&nbsp;Général&nbsp;</legend>

    <div class="formElement">
      <span class="wideFormLabel">{{form_label(pathForm.url)}}</span>
      <span>{{form_widget(pathForm.url)}}</span>
      <div class="syncBtnSmall">
        <i class="fas fa-sync-alt syncIconSmall syncPath" onclick=""></i>
      </div>
    </div>

    <div class="formElement">
      {{form_label(pathForm.name)}}
      {{form_widget(pathForm.name)}}
    </div>

    <div class="formElement">
      {{form_label(pathForm.alias)}}
      {{form_widget(pathForm.alias)}}
    </div>

    <div class="formElement">
      {{form_label(pathForm.comment)}}
      {{form_widget(pathForm.comment)}}
    </div>

  </fieldset>

  <fieldset class="formFieldset addProjectsFieldset">
    <legend class="pathLegend">&nbsp;Projets&nbsp;</legend>

    <div class="DnDProjectsFilter formElement">
      <label class="formLabel">Filtrer les projets :</label>
      <input id="liveSearchField" type="text" onkeyup="formManager.showTagWordResults(this.value);">
    </div>

    <div class="DragNDrop">
      <div id="dropList" class="dropProjects sortable" ondragenter="dragNDropManager.onDragEnter(event);" ondragleave="dragNDropManager.onDragLeave(event);" ondragover="dragNDropManager.onDragOver(event);" ondrop="dragNDropManager.onDropToLeft(event);"></div>

      <div id="dragList" class="dragProjects sortable" ondragenter="dragNDropManager.onDragEnter(event);" ondragleave="dragNDropManager.onDragLeave(event);" ondragover="dragNDropManager.onDragOver(event);" ondrop="dragNDropManager.onDropToRight(event);">
        {% for project in projects %}
          <p id="item{{project.id}}" class="draggable" draggable="true" ondragstart="dragNDropManager.onDragStart(event);" ondragover="dragNDropManager.onDragOverElement(event);" ondragenter="dragNDropManager.onDragEnterElement(event);" ondragleave="dragNDropManager.onDragLeaveElement(event);" ondrop="dragNDropManager.onDragDropElement(event);">
            {{project.name}}
          </p>
        {% endfor %}
      </div>
    </div>

  </fieldset>

  <div class="formBtnContainer">
    <button class="formBtn pathFormbtn" type="submit">Valider</button>
    <button class="formBtn pathFormbtn" type="">Annuler</button>
  </div>

  {{form_end(pathForm)}}
</div>

将
ondrop=“event.preventDefault（）”
放在这些输入上是否有帮助？是的。是的。非常感谢。我真不敢相信事情会这么简单。
    export default class DragNDropManager {

    onDragStart(event) {

        event
            .dataTransfer
            .setData('text/plain', event.target.id);
        
        event
            .dataTransfer
            .effectAllowed = 'move';
    }

    onDragOver(event) {
        event.preventDefault();
    }

    onDragEnter(event) {

        event
            .currentTarget
            .style
            .opacity = "50%";
    }

    onDragLeave(event) {

        event
            .currentTarget
            .style
            .opacity = "100%";
    }

    onDropToLeft(event) {

        event.stopPropagation();
        event.preventDefault();

        const id = event
            .dataTransfer
            .getData('text');

        const draggableElement = document.getElementById(id);
        let dropZone = event.target;
        while (dropZone.id != "dropList") {
            dropZone = dropZone.parentNode;
        }
        dropZone.appendChild(draggableElement);

        event
            .dataTransfer
            .clearData();
        
        event
            .currentTarget
            .style
            .opacity = "100%";

    }

    onDropToRight(event) {

        event.stopPropagation();
        event.preventDefault();

        const id = event
            .dataTransfer
            .getData('text');

        const draggableElement = document.getElementById(id);
        let dropZone = event.target;
        while (dropZone.id != "dragList") {
            dropZone = dropZone.parentNode;
        }
        dropZone.appendChild(draggableElement);
        
        event
            .currentTarget
            .style
            .opacity = "100%";

        event
            .dataTransfer
            .clearData();
    }

    onDragOverElement(event) {
        event.preventDefault();
        event.currentTarget.style.backgroundColor = "#232323";
    }

    onDragEnterElement(event) {
        event.currentTarget.style.backgroundColor = "#232323";
    }

    onDragLeaveElement(event) {
        event.currentTarget.style.backgroundColor = "#323232";
    }

    onDragDropElement(event) {
        event.stopPropagation();
        event.preventDefault();

        const id = event
            .dataTransfer
            .getData('text');

        const draggableElement = document.getElementById(id);
        let targetElement = event.target;
        let dropZone = targetElement.parentNode;

        dropZone.insertBefore(draggableElement, targetElement);

        event
            .currentTarget
            .style
            .backgroundColor = "#323232";

        event
            .dataTransfer
            .clearData();
    }
}