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

Question

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

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>

​