JSFiddle - React, Tailwind, and code Playground

by rajeshpillai

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div id="dimarea" data-role="drag-drop-container">
    <div class="btn-group" draggable="true" id="dim1">
      <button type="button" class="btn btn-info btn-xs dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
</div>

<table border="2"> 
    <tr>
        <td align="center">+</td> 
        <td><div class="colcontainer" data-role="drag-drop-container"></div></td> 
    </tr> 
    <tr>
        <td> 
            <div class="rowcontainer" data-role="drag-drop-container"></div>
        </td> 
        <td valign="top"> Insert PIVOT table here</td>
    </tr> 
</table>

CSS

[draggable="true"] {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    
    /* support old version of webkit */
    
    -khtml-user-drag: element;
    -wekkit-user-drag: element;
}

table{
    border:1px;
    
}
#dimarea{
    background-color:lightgray;
    height:36px;
}
.colcontainer{
    width:600px;
    height:40px;
    background:#e6EEEE;
}

.rowcontainer{
    width:100px;
    height:600px;
    background:#e6EEEE;
}

JavaScript

$(function(){
    var sourceContainerId,
      dragStart = function (e){
        $(this).addClass('drag');
        console.log("id:",e.target.getAttribute("id"));
        // IE doesn't support text/plain
        try {
          e.dataTransfer.setData('text/plain', e.target.id);
        }catch (ex){
          e.dataTransfer.setData('Text', e.target.id);
        }
        sourceContainerId = this.parentElement.id;
      },
      dragOver = function(e){
        cancel(e);
        $(this).addClass('over');
      },
      dragLeave = function(e){
        $(this).removeClass('over');
      },
      dragEnd = function (e){
        $('.drag').removeClass('drag');
        $('.over').removeClass('over');
      },
      dropped = function (e){
        cancel(e);
        var id;
        
        try {
          id = e.dataTransfer.getData('text/plain');
        }catch (ex){
          id = e.dataTransfer.getData('Text');
        }
        e.target.appendChild(document.querySelector('#' + id));
          
      },
      cancel = function (e){
         if (e.preventDefault){
          e.preventDefault();
        }
        if (e.stopPropagation){
          e.stopPropagation();
        }
        return false;
      };
    
    
    var selector = '[data-role="drag-drop-container"]',
        containers = $(selector);
    
    containers.each(function(index, c){
      c.addEventListener('drop', dropped,false);
      c.addEventListener('dragenter',cancel,false);
      c.addEventListener('dragover',dragOver,false);
      c.addEventListener('dragleave',dragLeave,false);
    });
    
    var sources = $('[draggable="true"]');
   
    sources.each(function(index, source){
      source.addEventListener('dragstart', dragStart, false);
      source.addEventListener('dragend', dragEnd, false);
    });

});