title: jQuery UI : Draggable element is moving inside the sidebar. Why?
body: <p>I have to make a sidebar which has divs inside it and the divs are Draggable and Droppable to the drop area.</p>
  
  <p><strong>So what I have done:</strong> </p>
  
  <p>I have make a sidebar. </p>
  
  <pre><code>$(".draggable").each(function() {
      $(this).draggable({
        zIndex: 999,
        scroll: false,
        revert: 'invalid',
        refreshPosition: true,
      });
  });
  
  $(".droppable").droppable({
          accept: '',
          drop: function(event, ui) {
              console.log('Function working successfully');
          }
  
      })
  </code></pre>
  
  <p>Here it is <a href="https://jsfiddle.net/MyTests/9gwLqpkh/1/" rel="nofollow noreferrer">fiddle</a></p>
  
  <p><strong>Problem:</strong> </p>
  
  <p>My problem is that when I drag the element the dragged element does not go outside the sidebar. Why is it happening and how can I resolve this problem.</p>
  
  <p>Update :</p>
  
  <p><a href="https://jsfiddle.net/MyTests/9gwLqpkh/4/" rel="nofollow noreferrer">Fiddle</a></p>