Jquery UI droppable 的 hoverClass 在移动设备中没有触发

Question

我正在使用可拖放的 jQuery UI 来实现像 http://www.casetify.com/design 这样的输出。 Here 是我页面的链接。一切都在桌面宽度上按预期工作，但在移动仿真/设备中不起作用。

在我的page 的第三步，当图像从侧边栏拖到移动封面时，droppable 的悬停类被触发。但是这个悬停类并没有在移动仿真/设备中被解雇。当鼠标指向可放置区域的右下角时，它会被触发。下面是可拖放元素的代码。

$('#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。

Answer 1

假设您的问题不是悬停类，但您的实际问题是比例因子。

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