Jquery UI droppable's hoverClass in not firing in mobile device

Question

I am using jQuery UI draggable and droppable to achieve the output like http://www.casetify.com/design. Here is the link of my page. All is working as expected in desktop width, but its not working in mobile emulation/device.

On the 3rd step of my page, when image is dragged from sidebar to mobile cover, droppable's hoverclass is fired. But this hoverclass is not getting fired in mobile emulation/device. It gets fired when mouse is pointed in bottom right of the droppable area. Below is the code for draggable and droppable element.

$('#image-pool-list img.dddraggable').draggable({
  revert: "invalid",
  helper: "clone",
  //appendTo: "body",
  //zIndex: 100,
  live: true,
  refreshPositions: true,
  drag: function(event, ui) {
    $(ui.helper).css('opacity', '0.5');
    $('div.design-template').css('opacity', '1');
    ui.helper.css({
      'width': '90px',
      'height': '90px'
    });
    //console.log(ui.helper);
  },
  stop: function(event, ui) {
    //$('div.design-template').css('opacity','0.2');
  }
});

$("div#template div.design-template div.placeholder").droppable({
  hoverClass: "drop-hover",
  tolerance: 'fit',
});

So please someone let me know, how to get the hoverClass triggered in mobile emulation/device even if the mouse pointer is in center poistion.

Answer 1

Suppose your problem is not a hoverclass but your actual problem is scalefactor.

$('#image-pool-list img.dddraggable').droppable({
        revert: "invalid",
        helper: "clone",
        live: true,
        refreshPositions: true,
        start: function( event, ui ) {
               scaleFactor = 0.6;
               click.x = event.clientX;
               click.y = event.clientY;
        },
        drag: function( event, ui ) {
              $(ui.helper).css('opacity','0.5');
              $('div.design-template').css('opacity','1');
              var zoom = 0.6;
              var original = ui.originalPosition; 
              ui.position = {
                     left: (event.clientX - click.x + original.left) / zoom,
                     top:  (event.clientY - click.y + original.top ) / zoom
              };
        },
        stop: function( event, ui ) {
               $('div.design-template').css('opacity','0.2');
               click.x = 0;
               click.y = 0;
        }
});