Question

我正在使用jQuery UI draggable和droppable来实现像http://www.casetify.com/design这样的输出。 Here是我的信息页的链接。所有这些都在桌面宽度中按预期工作，但它不适用于移动仿真/设备。

在page的第3步，当图像从侧边栏拖动到移动封面时，会触发droppable的hoverclass。但是这个hoverclass并没有在移动仿真/设备中被解雇。当鼠标指向可放置区域的右下角时会被触发。下面是draggable和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

假设您的问题不是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;
        }
});

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

1 个答案: