javascript - PDFTron Webviewer - 缩略图拖放移动

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);
  });
});