How to use jqueryui droppable with mouseover

Question

On a web page, I want to display a small div with text in it that is cut off and displayed with ellipses and when there is a mouse-over it should expand to a larger size such that all the text is visible. I then want to be able to use jqueryui drag and drop to move the text box onto a grid. When it is being dragged and placed, I want it to be the small size again.

I have attempted to do this like so:

Mouseover function:

$(function() {
  $( ".ui-widget-content" ).mouseover(function(){
    $(this).css("width", "200px");
    $(this).css("height", "200px");
  }).mouseout(function(){
    $(this).css("width", "100px");
    $(this).css("height", "40px");            
  })
})

Draggable function:

    $(function() {
      $( ".ui-widget-content" ).draggable({ snap: "td.chart:not(:first-child)", snapMode: "inner", revert: "invalid", snapTolerance: 40, stack: ".ui-widget-content",
        drag: function( event, ui ) {
          $(this).css("width", "100px");
          $(this).css("height", "40px");
        }
      });
    });

Droppable function:

    $(function() {
      $( "td.chart:not(:first-child)" ).droppable({
        accept: ".ui-widget-content",
        drop: function( event, ui ) {
          $("#" + ui.draggable.attr("id") ).css("background-color","#D7F970");
        }
      });
    });

Div that is getting dragged and dropped:

Lorem Ipsum

I thought that by using the above, when someone went to drag the div, first the mouse over would be triggered, enlargening the div, then the dragstart would shrink it and it would be fine. However, I am placing it on a table (see selector "td.chart:not(:first-child)" in droppable function), and while it works for the first three rows of the table, the div no longer snaps and gets dropped on the fourth and fifth rows. This problem does not occur if I remove the mouse-over function. Anyone understand what is going on here?

Answer 1

It would maybe help to take a look at your html.

It's just a hunch but maybe it's only a matter of the size of your draggable being too big and being over more than one droppable item. I would advise trying to change the tolerance of your droppable element to see if it helps :

$( ".selector" ).droppable({ tolerance: "pointer" });

jQuery Documentation states :

Tolerance specifies which mode to use for testing whether a draggable is 'over' a droppable. Possible values:

• fit: draggable overlaps the droppable entirely
• intersect: draggable overlaps the droppable at least 50%
• pointer: mouse pointer overlaps the droppable
• touch: draggable overlaps the droppable any amount