title: jQuery UI: draggable on dragenter
body: <p>I am following <a href="http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/" rel="nofollow">this guide</a> for jQuery draggable item.</p>
  
  <p>The only thing I miss is <code>dragenter</code> and <code>dragleave</code> events to play around with CSS of interim elements. It only provides <code>hoverClass</code> property for droppable elements, when draggable elements are moved on them. How about if we need to change the CSS of other elements?</p>
  
  <p>Current code look like this:</p>
  
  <pre><code>$(".part").draggable({
      start: startDrag,
      stop: stopDrag,
      revert: true
  });
  $(".parts-action").droppable({
      accept: '.part',
      hoverClass: 'hovered',
      drop: handleDrop
  });
  </code></pre>
  
  <p>In addition to that, I need something like:</p>
  
  <pre><code>$(".wrapper").on('dragenter', function (e) {
      $(this).next(".parts-action").show();
  });
  
  $(".wrapper").on('dragleave', function (e) {
      $(this).next(".parts-action").hide();
  });
  </code></pre>
  
  <p>But its not working when using <code>draggable()</code> alongside. </p>
  
  <p>I also tried:</p>
  
  <pre><code>$(".part").draggable({
      drag: handleDrag
  })
  
  function handleDrag(e, ui){
      /* how to know if active draggable is on some element other than droppable? */
  }
  </code></pre>
  
  <p>which is very confusing because its tied to draggable and droppable!</p>