如何在ace-editor中实现拖放功能

Question

我想在 ace 编辑器中添加拖放功能。我有一个侧边栏包含一些对象，我想做的是我可以将对象从侧边栏拖放到 ace-editor 上。

Answer 1

在对象开始拖动时设置文本数据，ace 将在将元素拖放到其上时插入该文本。

// create 
document.querySelector("#drag").ondragstart = function(e) {
  var dataTransfer = e.dataTransfer;
  dataTransfer.effectAllowed
  dataTransfer.setData("Text", e.target.outerHTML + "\n");
}
// create editor
var editor = ace.edit(null, {
  maxLines: 10,
  minLines: 5,
})

document.body.appendChild(editor.container)

#drag {
  padding: 10px
}

#drag>span {
  padding: 3px;
  border: solid 1px purple;
  cursor: grab;
}

<script src=https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js></script>


<div id=drag>
  <span draggable=true >Drag Me</span>
  <span draggable=true >Or Me</span>
</div>

如何在ace-editor中实现拖放功能

How to implement drag&drop functionality in ace-editor

drag-and-drop

ace-editor