Question

在PDFTron Viewer 2.2.2中，我们添加了拖放缩略图来移动页面。

但是在3.0.1和3.1.0中，这是不可能的。你阻止了拖放事件吗？（所有浏览器都受到影响）

这里是config.js中的代码

$uidisplay = $("#ui-display");
      $uidisplay.on("dragstart", function(event) {
   try{
      if($.type(event.originalEvent.dataTransfer)!="undefined"){
         event.originalEvent.dataTransfer.setData("text","");
         event.originalEvent.dataTransfer.setDragImage(dragImg, 10, 10);
      }
   }
   catch (e) {
      e.message;
   }
   $dragCanvas = _createCanvas();
   $thumbnailsPane.scroll(_paneOnScroll);
   $(".ui-state-selected",$thumbnailsPane).css({"opacity" : "0.4"});
});
      $uidisplay.on("dragover", function(event) {
   var $context = event.target==$thumbnailsPane.get(0) ? $(event.target) : $(event.target).parents("#thumbnailView");
   var changeClass = false;
   if($context.length){
      changeClass = _setOnDragSelector(event.originalEvent ? event.originalEvent : event);
      if(event.target==$thumbnailsPane.get(0)){
         changeClass  = false;
         _scrollViewPane(event);
      }
   }
   if(!changeClass){
      $(".ui-state-drag-enter-left",$thumbnailsPane).removeClass("ui-state-drag-enter-left");
      $(".ui-state-drag-enter-right",$thumbnailsPane).removeClass("ui-state-drag-enter-right");
   }
   if((ondragCount++)%10==0){
      //console.log("ondragCount");
      $dragCanvas.css({'top' : (event.originalEvent.clientY + 10) + "px", 'left' : (event.originalEvent.clientX + 10) + "px"});
   }
});
      $uidisplay.on("dragend", function(event) {
   //console.log("dragend : " + $(event.target).prop("tagName"));
   onScrollCount = 0;
   ondragCount = 0;
   $dragCanvas.remove();
   $dragCanvas = null;
   var $target = $(".ui-state-drag-enter-left,.ui-state-drag-enter-right");
   if($target.length && $target.hasClass("thumbContainer") && Number($thumbnailsPane.attr("drag-enter-id"))>=0){
      _movePages();
   }else{
      _endOnDragSelector();
   }
});

Answer 1

看起来这种情况正在发生，因为在使用带触摸屏的桌面查看器时，WebViewer中添加了代码以防止页面四处移动。

解决此问题的一种方法是将鼠标悬停在缩略图上时切换到“平移”工具，然后在移回文档时切换回来。这是有效的，因为Pan工具没有相同的事件预防代码。以下是您可以添加到配置文件中的代码：

$(document).on('documentLoaded', function() {
  var oldToolMode;

  $('#thumbnailView').on('mouseenter', function() {
    oldToolMode = readerControl.getToolMode();
    readerControl.setToolMode('Pan');
  });

  $('#thumbnailView').on('mouseleave', function() {
    readerControl.setToolMode(oldToolMode);
  });
});

PDFTron Webviewer - 缩略图拖放移动

1 个答案: