html - 使用 Google Doc AddOn 的 Apps 脚本处理 'drop' 事件

标签 html google-apps-script drag-and-drop google-docs-api droppable

我想使用 Apps Script AddOn 处理 Google Docs 的 ondrop 事件。

我可以看到 Google Docs 提供了拖放功能,我们可以通过它轻松地将图像从 images.google.com 拖到 google doc。我想通过我正在开发的 AddOn 来处理这个掉落事件。

尝试找到一些内置的方法来处理放置事件,但谷歌目前还没有提供。我曾尝试过很多其他方法,如 HTML5 DnD 等,但由于插件呈现为 iframe,因此无法访问 doc html。 window.parent 没有帮助。

我们将不胜感激

最佳答案

我在使用拖放 API 时没有遇到同样的问题。这可能与确保设置 <base target="_top"> 有关。 .下面的脚本是用谷歌文档编写的。只需从 google images 中拖出一张图片,它就会显示在对话框中。

代码.gs

function onOpen() {
  var menu = DocumentApp.getUi().createMenu("Get Image");
  menu.addItem("Open Dialog", "openDialog").addToUi();
}

function openDialog(){
  var html = HtmlService.createHtmlOutputFromFile('index');
  DocumentApp.getUi().showModelessDialog(html, "drag n drop")
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
 <style>
 span {
    display: inline-block;
}
img {
    width: 100%;
}
</style>
  </head>
  <body>
    Drag Image Here<br>
    <span><img id="img" heigth=></span>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script>
$(document).on('dragover', function(e) {e.preventDefault();return false;});
$(document).on('drop', function(e) {
    e.preventDefault();
    e.originalEvent.dataTransfer.items[0].getAsString(function(url){
        var parser = document.createElement('a');
        parser.href = url;
        if(parser.hostname === "www.google.com"){
          var src = parser.search.split("?")[1].split("&")[0].split("=")[1];
             $("#img").attr("src",src);
        }else{
          alert("please select an image from google images")
        }

    });
});
  </script>
</html>

关于html - 使用 Google Doc AddOn 的 Apps 脚本处理 'drop' 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34211607/

相关文章:

html - 是否可以组合通用样式并删除重复

performance - 有没有办法加速/批量 Google 日历读/写?

javascript - 从嵌入的 Google Sheet 中删除 Google Border

javascript - event.dataTransfer 和 event.originalEvent 在 dragstart 事件处理程序中始终为 null

c# - 如何将项目从 C# 窗体拖放到其他应用程序上?

html - 菜单悬停下拉

html - 如何将 "social-media"div 放在页眉的右上角?

python - 使用 python 和 lxml 模块从 html 中删除所有 javascript 标签和样式标签

google-apps-script - 尝试使用应用程序脚本获取 Google Analytics 4 时出现身份验证错误

javascript - 无法让拖放操作与 html5/javascript 一起使用