title: Continually fire mouseover event while dragging over an element jquery ui?
body: <p>Hopefully this makes sense. I'm creating a drag and drop modal with jquery UI. I have my code set up to fire a function that adjusts some styling using the "over" option. Here's my code.</p>
  
  <pre><code>    function makeDraggable(){
      $(function(){
          $( "tr[role='row']" ).draggable({
            cursor: "none",
            cursorAt: { top: 50, left: 50 },
            containment: "body",
            scroll: false,
            delay: 200,
            start: function() {
              openModal();
            },
            stop: function() {
              closeModal();
            },
            helper: function( event ) {
            return $( "&lt;div class='drag-folder'&gt;&lt;img src=&lt;?php echo site_url("imgs/processIcons/file_icon.svg");?&gt;&gt;&lt;/div&gt;" );
              }
          })
      });
      makeDroppable();
  }
  
  function makeDroppable(){
      $(function(){
          $( ".flex-item" ).droppable({
                tolerance: 'pointer',
              over: function(event, ui) {
                  $(this).find('.drag-container').css('height', (180 + (event.pageY / 5 )));
              },
              out: function(event, ui) {
                  $(this).find('.drag-container').css('height', '');
              },
              drop: function(event, ui) {
                  $('.drag-container').css('height', '');
              }
          })
      });
  }
  
  function openModal(){
      var modal = $('.drag-modal');
      modal.fadeIn();
  }
  
  function closeModal(){
      var modal = $('.drag-modal');
      modal.fadeOut();
  }
  </code></pre>
  
  <p>The effect I'm trying to achieve is this: The user starts dragging on an element, a modal pops up with several different drop regions. For aesthetic purposes, the height of each drop region stretches vertically towards the mouse. The problem is the height is adjusted using the 'over' option but it only fires once (When the mouse enters the element). Is there some way I can run my code that changes the height every time the mouse moves, but only while over the element? </p>
  
  <h2><strong>--edit--</strong></h2>
  
  <p>It occurred to me that perhaps this could be achieved using some kind of while loop, but I haven't been able to figure out a solution that doesn't crash the page. </p>