# Drop event default prevented when dragging nodes

**URL:** <https://discuss.prosemirror.net/t/drop-event-default-prevented-when-dragging-nodes/8169>\
**Category:** Uncategorized\
**Created:** [January 27, 2025, 8:07pm UTC](https://discuss.prosemirror.net/t/drop-event-default-prevented-when-dragging-nodes/8169 "2025-01-27T20:07:32Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![degel123](https://discuss.prosemirror.net/letter_avatar_proxy/v4/letter/d/9de053/32.png) [@degel123](https://discuss.prosemirror.net/u/degel123)\
**Post date:** [January 27, 2025, 8:07pm UTC](https://discuss.prosemirror.net/t/drop-event-default-prevented-when-dragging-nodes/8169/1 "2025-01-27T20:07:32Z")

</div>

I want to reorder two nodes of the same type and something strange is happening. When I drop the node, in `prosemirror-view` the `drop` event does not belong to view because of `defaultPrevented` set to `true` and hece the `drop` handler is not called at all.

 ![image](https://discuss.prosemirror.net/uploads/secondsite/original/2X/d/d6e23d545f2cf45295664b712d6f191f976a6d7f.png)

I have a normal react `Editor` component and there is actually no problem - the event is not prevented and everything works fine. I also have a `FormEditor` component defined as below:

```auto

export const FormEditor = function <T extends FieldValues>({
  control,
  name,
  errors,
  editorRef,
  label,
  description,
  ...props
}: FormEditorProps<T>) {
  return (
    <Controller
      name={name}
      control={control}
      render={({ field }) => (
        <div className='flex flex-col gap-2'>
          {label ? <Label htmlFor={name}>{label}</Label> : null}
          {description ? (
            <Label className='text-xs text-muted-foreground' htmlFor={name}>
              {description}
            </Label>
          ) : null}
          <Editor onUpdate={field.onChange} {...props} ref={editorRef} />
          <FormError errors={errors} name={name} />
        </div>
      )}
    />
  );
};

```

and when dragging in this editor, the `defaultPrevented` is set to `true`. Why is that a case? What might drive it? Can I debug somehow the code to see where exactly the preventing default is happening? Not sure whether this is the root cause of the problem but currently thats my only idea. Actually, I can’t event drag a simple text from one place to another ☹ Any tips? Is that something react specifici?

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/marijn/32/15_2.png) [@marijn](https://discuss.prosemirror.net/u/marijn)\
**Post date:** [January 27, 2025, 8:24pm UTC](https://discuss.prosemirror.net/t/drop-event-default-prevented-when-dragging-nodes/8169/2 "2025-01-27T20:24:52Z")

</div>

That `eventBelongsToEditor` function is called right at the start of the ProseMirror code that interacts with the event. So whatever is calling `preventDefault` is likely not ProseMirror. Do you have any custom dragging code active, possibly coming from one of those React components?

---

<div class="post-metadata">

**Author:** ![degel123](https://discuss.prosemirror.net/letter_avatar_proxy/v4/letter/d/9de053/32.png) [@degel123](https://discuss.prosemirror.net/u/degel123)\
**Post date:** [January 27, 2025, 11:15pm UTC](https://discuss.prosemirror.net/t/drop-event-default-prevented-when-dragging-nodes/8169/3 "2025-01-27T23:15:32Z")

</div>

Indeed, the HTML5Backend from `react-dnd` was the problematic part (I used it in my Tree component to enable dragging) 🙂