4

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>

1 Answer 1

5

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>

4
  • Method 1 solved my problem, but I had to change the version, which you provided information above. Thank you very much for the detailed explanation and source information. Commented Jan 2 at 10:18
  • 1
    I'm glad to help! Note that I've updated the code in Method 1 a bit. I was checking MIME types in the custom drop handler so that dropping unsupported MIME types will trigger the default browser behavior. However, this does not align with the default behavior of the uploader module. If you want this customization, it should be done in the Uploader module instead of here.
    – SyndRain
    Commented Jan 2 at 15:55
  • Also you can use 2.0.0-dev.4 if you prefer not to use 2.0.0-beta.0 which just released.
    – SyndRain
    Commented Jan 2 at 16:17
  • 1
    They probably won't care about the MIME type, they wanted to copy the text entirely, so I tried the first solution today and as you said, I used the dev 0.4 version, it was very nice for me, thank you again :) Commented Jan 3 at 8:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.