jQuery UI droppable的hoverClass无法在移动设备中触发

user2014 发表于 Dev

165

user2014

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

在页面的第3步，当将图像从边栏拖动到移动封面时，将触发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。

达瓦尔·萨瓦利亚（Dhaval Savaliya）

假设您的问题不是悬浮类，但实际的问题是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;
        }
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。