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>