title: Draggable and Clickable input element using jquery
body: <p>I have an input element inside a draggable div. My code should do the following things:</p>
  
  <ul>
  <li>When I drag my input element, entire draggable div should be dragged. (Accomplished)</li>
  <li>When I click on the input element, I should be able to edit the text. (Could not accomplish)</li>
  </ul>
  
  <p>So, could some one tell me how to click and edit the text of an input element which is draggable as well?</p>
  
  <p>Here is my complete code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Draggable and Clickable Input&lt;/title&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
          &lt;script src="js/jquery-ui.js"&gt;&lt;/script&gt;
          &lt;style&gt;
              .draggable{height:500px;width:500px;background:blue;}
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div class="draggable" &gt;
              &lt;input type="text" value="drag me!"/&gt;
          &lt;/div&gt;
  
          &lt;script&gt;
              $('.draggable').draggable({
                  cancel: ''
              });
          &lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>