PDFTron Webviewer - 缩略图拖放移动答案

【问题标题】：PDFTron Webviewer - Thumbnail drag and drop movingPDFTron Webviewer - 缩略图拖放移动
【发布时间】：2017-12-21 13:40:12
【问题描述】：

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

【问题讨论】：

标签： javascript drag-and-drop pdftron

【解决方案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);
  });
});

【讨论】：