Docs Editor Model/Schema Cases Scenarios Tips Playground Coverage

deleteByDrag

How deleteByDrag inputType handles content deletion via drag operations and varies across browsers.

Overview

The deleteByDrag inputType is triggered when content is deleted by dragging it out of a contenteditable element (typically to a non-editable area or external application). The browser removes the dragged content from the DOM.

Basic Behavior

Scenario: Text dragged out of contenteditable

Before (Text selected)

HTML:
<p>Hello world text</p>

After dragging "world" outside contenteditable

HTML:
<p>Hello | text</p>
Dragged content removed from DOM

Browser Support

ℹ️ Limited Browser Support

deleteByDrag is not widely supported across all browsers. Some browsers may use deleteContent or other inputType values instead.

Always test drag-and-drop deletion behavior across different browsers and platforms.

Difference from deleteContent

deleteByDrag

  • Content is deleted by dragging it out of the element
  • Requires drag-and-drop interaction
  • May be used when dragging to external applications

deleteContent

  • Content is deleted via keyboard (Delete key) or programmatically
  • No drag interaction required
  • More commonly used inputType

Editor-Specific Handling

Different editor frameworks handle drag deletion similarly to regular deletion. Here's how major editors implement deleteByDrag:

Slate.js

Drag Deletion Handling

Slate handles drag deletion through drag events: 

    import { Editor, Transforms } from 'slate';

element.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'deleteByDrag') {
    e.preventDefault();
    
    const { selection } = editor;
    if (selection && !selection.isCollapsed) {
      // Delete selected content
      Transforms.delete(editor);
    }
  }
});

// Also handle dragend event
element.addEventListener('dragend', (e) => {
  // Content has been dragged out
  // Selection may need to be updated
});
  • Transforms.delete: Uses same deletion method as regular delete operations.
  • Drag event handling: May need to handle dragend event separately.
ProseMirror

Drag Deletion Handling

ProseMirror handles drag deletion: 

    import { deleteSelection } from 'prosemirror-commands';

view.dom.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'deleteByDrag') {
    e.preventDefault();
    const { state, dispatch } = view;
    
    if (!state.selection.empty) {
      if (deleteSelection(state, dispatch)) {
        // Handled
      }
    }
  }
});
  • deleteSelection command: Uses same deletion command as regular delete operations.
  • Selection handling: Requires non-empty selection.
Draft.js

Drag Deletion Handling

Draft.js handles drag deletion: 

    import { EditorState, Modifier } from 'draft-js';

function handleDragDeletion(editorState) {
  const contentState = editorState.getCurrentContent();
  const selection = editorState.getSelection();
  
  if (!selection.isCollapsed) {
    // Delete selected content
    const newContentState = Modifier.removeRange(
      contentState,
      selection,
      'forward'
    );
    
    return EditorState.push(
      editorState,
      newContentState,
      'remove-range'
    );
  }
  
  return editorState;
}
  • Modifier.removeRange: Uses same deletion method as regular delete operations.
  • Selection required: Requires non-empty selection.

Related resources