首先是Quill intentionally blocked the dragging，因此在启用它之前确保您有一个适当的用例是很重要的.
Quill 2.0通过在dragstart事件处理程序(handleDragStart)中调用e.preventDefault()来禁用drag events.这个训练员过go 是Quill级的，但现在是has been moved to Scroll to allow overwriting级了.请注意，此更改仅适用于2.0.0-dev.4(和2.0.0-beta.0)之后，因此您不能使用2.0.0-dev.3.
let Scroll = Quill.import('blots/scroll');
class DraggableScroll extends Scroll {
handleDragStart(e) {}
};
Quill.register(DraggableScroll);
一旦你解决了"拖拽"问题，你还需要解决"拖拽"部分.以下是两种方法:
Method 1: Have the browser handle the insertion like Quill 1.3个
uploader模块中的Quill 2.0 blocked the 'drop' event用于文件上传，因此浏览器不会插入拖放的内容.当删除文件或文件夹未触发Drop事件时，您可以阻止Drop事件传播:
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));
}
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>
一百零二
您可以创建一个dragend/drop事件处理程序来将拖放的元素移动到它们的拖放位置，而不是让浏览器处理元素的插入.(我现在不知道如何实现，所以我会把它留给其他知道如何实现正确的方法的人.)
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>