JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<!DOCTYPE html>
<html>
     <head>
          <title>mindmap plugin</title>

          <script type="text/javascript" src="jquery-1.7.2.js"></script>
          <script src="jquery.ui.core.js"></script>
          <script src="jquery.ui.widget.js"></script>
          <script src="jquery.ui.mouse.js"></script>
          <script src="jquery.ui.draggable.js"></script>
          <script type="text/javascript" src="mindmap.js"></script>
          


          <link rel="stylesheet" media="screen" type="text/css" href="chrome.css" />

     </head>
     <body>
    <div id="main">
      <ul>
        <li id="show"><a class="click" href="#">Rohan</a>
        </li>
      </ul>
    </div>
    </body>
</html>

CSS

body, html {
    background-color:#999;
    border: 1.5px solid #00ff00;
    height: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

ul {
    list-style-type: none;
}

#main {
    margin: 0 auto;
    border : 3px solid #000;
    top: 0px;
    width: 200px;
}

#show {
    text-align: center;
    vertical-align: 250px;
}

a {
    color:#fff;
    font-family: Arial, "MS Trebuchet", sans-serif;
    text-decoration: none;
    background:#3399ff;
    border: 2px solid white;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 7px 7px 7px 7px;
    border: 5px 5px 5px 5px;
    word-spacing:5px;
    vertical-align: 0px;
}

JavaScript

$(document).ready(function(){

  

  $( "#show" ).draggable({ handle: "#main"});

  var pos = $("#show").position();
  console.log(pos.left + "," + pos.top);
    
    $( "#main" ).draggable({
   start: function(event, ui) { 
   
    $( "#show" ).draggable({ handle: "#main"});

   
   }
});


});