Search code examples
drag-and-dropace-editor

How to implement drag&drop functionality in ace-editor

I want to add drag&drop functionality into the ace-editor. I have a sidebar contains some objects, what I want to do is I can drag the object from the sidebar and drop it on the ace-editor.

Solution

  • Set text data when object starts dragging, ace will insert that text when dropping element onto it.

    // 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>