JQuery UI droppable's hoverClass не работает в мобильном устройстве

Question

Я использую jQuery UI draggable и droppable для достижения результата, например http://www.casetify.com/design. Here - это ссылка на мою страницу. Все работает как ожидалось в ширине рабочего стола, но не работает в мобильной эмуляции/устройстве.

На третьем шаге моего page, когда изображение перетаскивается из боковой панели в мобильную крышку, наводится плавник droppable. Но этот hoverclass не запускается в мобильной эмуляции/устройстве. Он срабатывает, когда указатель мыши находится в правом нижнем углу отбрасываемой области. Ниже приведен код для перетаскиваемого и отбрасываемого элемента.

$('#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', 
}); 

Так, пожалуйста, кто-то дайте мне знать, как получить hoverClass срабатывает в мобильном эмуляции/устройстве, даже если указатель мыши находится в центре poistion.

Answer 1

Предположим, что ваша проблема не является классом hoverclass, но ваша фактическая проблема - 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; 
     } 
});