How to transfer data during dragging and dropping using Javascript event listener like “dragstart”


Please briefly explain why you feel this question should be reported .

Report Cancel

I am using ACE code editor. I am trying to add a feature of drag and drop of code blocks inside the editor. I have a div like this :

<div id=”draggable2″ draggable=true>
And I am using this event listener :
document.getElementById(“draggable2”).addEventListener(“dragstart”, function (e) {
e.dataTransfer.setData(“text”, “if()” + “\n” + “{” + “\n” + “\n” + “}”);
But Here I am sending hardcoded string value during transfer. But can there be another way of sending the data.

in progress 1 1 Answer 5892 views Beginner 1

About the AuthorBeginner

Answer ( 1 )

  1. Abhishek Sur
    February 13, 2017 at 7:04 pm

    Please briefly explain why you feel this answer should be reported .

    Report Cancel

    You can actually create a JSON which can point to the hard coded values. If you are looking for a data from sql, you can easily get the same using AJAX.

    Do like this :

    var codeBlocks = {

    if: ‘if(true){\n }’,
    ifelse: ‘if(true){ \n} \nelse{\n}’



    When you are accessing the code from hard coded value, replace the tagname with value.
    e.dataTransfer.setData(“text”, codeBlocks[dragobjectCaption]);


    I hope this will help you. 🙂

Leave an answer