Continually fire mouseover event while dragging over an element jquery ui?

Question

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.

    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 $( "<div class='drag-folder'><img src=<?php echo site_url("imgs/processIcons/file_icon.svg");?>></div>" );
            }
        })
    });
    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();
}

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?

--edit--

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.

Take a look at this: http://stackoverflow.com/a/8615260/789377 — Maxali, Jan 21 '16 at 00:51
@Maxali Thanks, I'm not sure that answers my question. Jquery UI has a built in option to fire a function on mouseEnter, but it only fires once. But maybe I missed what you were trying to point out. — Chris Patty, Jan 21 '16 at 00:56
@TJ I've tried to somehow combine the droppable 'over' option with 'mousemove' with no success. If it's possible I'm not certain how. Do you have a suggestion in that direction? Thanks. — Chris Patty, Jan 21 '16 at 08:03
@ChrisPatty Why do you need to combine them..? just have a mousemove listener for all droppables..? — T J, Jan 21 '16 at 08:04
@TJ Ah, I see what you're asking. Right now I'm using the 'over' option because it provides an easy 'this' to target the element currently below the mouse. I'm still learning JavaScript, is there another way for me to select that element while using the 'mousemove' function? — Chris Patty, Jan 21 '16 at 08:06
@ChrisPatty `this` will refer to the element to which listener is registered, in this case it'll be the droppable on which mouse is moving. The issue is that simple mousemoves other than drag will also trigger the handler. You might be able to check whether something is being dragged using the class that gets added to dragging item by jquery ui — T J, Jan 21 '16 at 08:26
That sounds like it might work. I could also change a global variable when dragging starts that triggers the mousemove listener. I'll give that a shot. Thanks! — Chris Patty, Jan 21 '16 at 08:40

score 0 · Answer 1 · answered Jan 21 '16 at 01:45

Could you use the ondragover event?

DEMO

JS

function allowDrop(ev) {
  document.getElementById("div1").textContent += " dragging! \n";
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

HTML

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>

<img id="drag1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=336&h=69" draggable="true" ondragstart="drag(event)" width="336" height="69">

CSS

#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
  font-size: 5px;
}

Ah! This looks promising. I've never used this attribute before, is it from HTML5? It appears to be doing what I want, I'll check tomorrow if it will play nicely with my existing javascript. Thanks! — Chris Patty, Jan 21 '16 at 08:08

Continually fire mouseover event while dragging over an element jquery ui?

--edit--

1 Answers1