JSFiddle - React, Tailwind, and code Playground

by sathyamoorthi

HTML

<!DOCTYPE html> 
<html id="top" style="width: 100%; height: 100%"> 
    <head> 
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <title>Data Analytics</title> 
        
        <script type="text/javascript">
            function handleDragStart(e) 
            {
                e.dataTransfer.setData("startIndex", $(e.target).index());                
            }
            
            function dragoveHandler(e) 
            {
                if (e.preventDefault)
                {
                   e.preventDefault(); // Necessary. Allows us to drop.
                }
            
                return false;
            }
            
            function handleDrop(e)
            {
                alert($(e.target).index());
            }            
        </script>
        
        <style>
            .div123
            {
                 border: 2px solid #666666;
                 background-color: #ccc;
                 margin-top: 50px;
                 width: 200px;
                 cursor: move;
            }
        </style>
        
        <div id="columns">
          <div class="div123" href="#" draggable="true" ondragstart="handleDragStart(event)" ondrop="handleDrop(event)" ondragover="dragoveHandler(event)">Hello World</div>
          <div class="div123" href="#" draggable="true" ondragstart="handleDragStart(event)" ondrop="handleDrop(event)" ondragover="dragoveHandler(event)">HTML5 drag and drop</div>
          <div class="div123" href="#" draggable="true" ondragstart="handleDragStart(event)" ondrop="handleDrop(event)" ondragover="dragoveHandler(event)">W3 schools</div>
        </div>
    </head>
</html>