2.0.0-dev quill drag text not working how make it drag text

Generally, in the quill 1.3 stable version, text can be moved, that is, we can move a certain listing from within and drop it somewhere, or we can drag and drop the text from somewhere, there is no need to do anything extra for this, even this is the case in a plain textarea.

For example, if you try the code below, you will see "Hello World!" "World!" you can cut it and leave it with you "at the beginning" and you will get the cut and pasted effect with dragging.

But if you remove the 2.0.0 dev version comment line and take the 1.3.6 version comment section and run it, how can I make this work if it doesn't specifically work?

<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- 
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/2.0.0-dev.3/quill.min.js"></script> 
-->

<!-- Initialize Quill editor -->
<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

Solution

First of all, Quill intentionally blocked the dragging, so it is important to ensure that you have a proper use case before enabling it.

Quill 2.0 disabled drag events by calling e.preventDefault() in the dragstart event handler (handleDragStart). This handler used to be in the Quill class, but has been moved to Scroll to allow overwriting. Note that this change applies only after 2.0.0-dev.4 (and 2.0.0-beta.0), so you can't use 2.0.0-dev.3.

let Scroll = Quill.import('blots/scroll');
class DraggableScroll extends Scroll {
  handleDragStart(e) {}
};
Quill.register(DraggableScroll);

Once you've addressed the 'drag' issue, you also need to fix the 'drop' part. Here are two ways to do it:

Method 1: Have the browser handle the insertion like Quill 1.3

Quill 2.0 blocked the 'drop' event in the uploader module for file uploading, so the browser isn't inserting the dropped contents. You can prevent the drop event from propagating when the drop event isn't triggered by dropping file or folders:

let Scroll = Quill.import('blots/scroll');

class DraggableScroll extends Scroll {
    constructor(registry, domNode, { emitter }) {
        super(registry, domNode, { emitter });
        this.domNode.addEventListener('drop', (e) => this.handleDrop(e), true);
    }

    handleDrop(e) {
        if (e.dataTransfer.files.length == 0)
            e.stopImmediatePropagation();
    }

    handleDragStart(e) { }
}

Quill.register(DraggableScroll);

var quill = new Quill('#editor', {
    theme: 'snow'
});

<link href="https://cdn.quilljs.com/2.0.0-dev.4/quill.snow.css" rel="stylesheet">

<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/2.0.0-dev.4/quill.min.js"></script>

Method 2: Instead of having the browser handle the elements' insertion, you could create a dragend/drop event handler that moves the dragged elements to their dropped position. (I don't know how, so I'll leave it for someone else who knows how to implement a correct one.)

let Scroll = Quill.import('blots/scroll');

class DraggableScroll extends Scroll {
    constructor(registry, domNode, { emitter }) {
        super(registry, domNode, { emitter });
        this.domNode.addEventListener('dragend', (e) => this.handleDragEnd(e));
    }

    handleDragStart(e) {
        this.dragged = e.dataTransfer.getData('text/plain');
    }
    
    /*a broken handler for demo purpose*/
    handleDragEnd(e) {
        e.preventDefault();

        const data = this.dragged;
        const selection = quill.getSelection();
        quill.deleteText(selection.index, selection.length);

        let index;
        if (document.caretRangeFromPoint) {
            index = document.caretRangeFromPoint(e.clientX, e.clientY).startOffset;
        } else {
            // firefox
            index = e.rangeOffset;
        }

        quill.insertText(index, data);
        quill.setSelection(index + data.length, 0);
    }
};

Quill.register(DraggableScroll);

var quill = new Quill('#editor', {
    theme: 'snow'
});

<link href="https://cdn.quilljs.com/2.0.0-dev.4/quill.snow.css" rel="stylesheet">

<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/2.0.0-dev.4/quill.min.js"></script>