Simple Native Drag & Drop

Simple Native JavaScript Drag & Drop

by alemonteiro

HTML

<div id="main_holder">

</div>

CSS

.drag-over {
  background: #F00;
}

JavaScript

function main(holder) {
  //SOURCE    
  var source = document.createElement("DIV");
  source.id="source";
  source.innerHTML='<h1 class=title>SOURCE</h1>';
  holder.appendChild(source);
  //ITEM      
  var item=document.createElement("DIV");
  item.id="item";
  item.draggable="true";
  item.ondragstart=function(evt){  
  	// Show whats being drag
  	evt.dataTransfer.setData("text", evt.target.id);
  };
  item.innerHTML='DRAG ME';
  source.appendChild(item);
  
  var item2=document.createElement("DIV");
  item2.id="item2";
  item2.draggable="true";
  item2.ondragstart=function(evt){  
  	evt.dataTransfer.setData("text", evt.target.id);
    evt.dataTransfer.setData("clone", true);
  };
  item2.innerHTML='CLONE ME';
  source.appendChild(item2);
    
  //TARGET
  var target = document.createElement("DIV");
  target.id="target";
  target.innerHTML="<h1 class=title>TARGET</h1><div id=drop_holder></div>";
  target.ondragover=function(evt){ 
  	evt.preventDefault(); // enable drop
  	this.className = 'drag-over';  // shows drop
  };
  target.ondragleave=function(){ this.className = ''; };
  target.ondrop=function(evt){ 
    // Prevent browser redirect
    if(evt.preventDefault) { evt.preventDefault(); }
    if(evt.stopPropagation) { evt.stopPropagation(); }
    
  	this.className = '';  
    // get dropped element
    var data = evt.dataTransfer.getData("text"),
        el = document.getElementById(data),
        // get drop holder
    		dropholder = document.getElementById('drop_holder'),
        // clone element if so
        doclone = evt.dataTransfer.getData("clone") || false;
        if ( doclone ) el = el.cloneNode(true);
        
        el.draggable = false; // not clonned elements would still be draggable
        
      	dropholder.appendChild(el);
      
     return false;
  };
  
  holder.appendChild(target, false);
}

main(document.getElementById("main_holder"));