title: Drag and drop html code is not working
body: <p>My drag and drop HTML code is not working,I am not able to drag the boxes to the red box, below is the code, I am able to open the html webpage and my boxes are apppearing over there but I am unable to perform drag and drop operation.</p>
  
  <p><a href="https://i.stack.imgur.com/L2kDN.png" rel="nofollow noreferrer">Below is the link to the image of my HTML page </a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset=utf-8&gt;
  &lt;title&gt;Drag and drop&lt;/title&gt;
  &lt;style type="text/css"&gt;${TBC}&lt;/style&gt;
  &lt;script src="https://ajax.googleapis.com/
  ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/
  ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;header&gt;
  &lt;h1&gt;Drag and drop&lt;/h1&gt;
  &lt;/header&gt;
  
  &lt;div&gt;
  &lt;p&gt;Drop items onto the red square to remove them&lt;/p&gt;
  &lt;div id="obliterate"&gt;&lt;/div&gt;
  &lt;u1&gt;
    &lt;li&gt;
       &lt;div id="one" href="#" class="draggable"&gt;one&lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
       &lt;div id="two" href="#" class="draggable"&gt;two&lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
       &lt;div id="three" href="#" class="draggable"&gt;three&lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
       &lt;div id="four" href="#" class="draggable"&gt;four&lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
       &lt;div id="five" href="#" class="draggable"&gt;five&lt;/div&gt;
    &lt;/li&gt;
  &lt;/u1&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;script type="application/javascript"&gt;${TBC}&lt;/script&gt;
  
  
  &lt;style type="text/css"&gt;
     li {
         list-style: none;
         }
  
     li div {
        text-decoration: none;
        color; #000;
        margin: 10px;
        width: 150px;
        float: left;
        border: 2px groove black;
        background: #eee;
        padding: 10px;
        display: block;
        text-align: center;
        }
  
     u1 {
         margin-left: 200px;
         min-height: 300px;
        }
  
     #obliterate {
         background-color: red;
         height: 250px;
         width: 166px;
         float: left;
         border: 5px solid #000;
         position: relative;
         margin-top: 0;
        }
  &lt;/style&gt;
  
  &lt;script type="application/javascript"&gt;
  $(function () {
      $(".draggable").draggable();
  
      $('#obliterate').droppable({
          drop: function (event, ui) {
             ui.draggable.remove();
       }
   });
  });
  &lt;/script&gt;
  &lt;/html&gt;     
  </code></pre>