Drag and Drop Panel

Angular editor

by Chandana Thota

HTML

<div id="div1" ondrop="drop(event, this)" ondragover="allowDrop(event)"></div>
<br/>
<img id="drag1" src="//placehold.it/336X69/ff0000" draggable="true" ondragstart="drag(event)" width="336" height="69" />

    <input type="text" id="textbox1" draggable="true" ondragstart="drag(event)" >
        <div id="testSnippet"></div>

CSS

#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

JavaScript

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData('Text/html', ev.target.id);
}

function drop(ev, target) {    
    ev.preventDefault();
    console.log(target.id, ev.target.id)
    var data = ev.dataTransfer.getData("text/html"); 
    if(data=="textbox1")
    {
        $('#testSnippet').append('<br>').append('<b>I am a textbox</b>');
    }
    else if(data=="drag1"){
        $('#testSnippet').append('<b>I am a image</b>');
    }
}