HTML/Electron：防止将可拖动数据拖放到应用程序之外答案

【问题标题】：HTML/Electron: Prevent dropping draggable data outside of applicationHTML/Electron：防止将可拖动数据拖放到应用程序之外
【发布时间】：2018-07-10 02:39:59
【问题描述】：

我正在制作一个电子应用程序，其中用户使用html drag and drop api 在窗口之间传输数据。例如，用户可能单击并拖动选项卡设置 dataTransfer 以保存包含有关自身信息的 JSON 对象。然后，用户将该选项卡拖放到另一个窗口的选项卡窗格中，信息将被移动。

但是我遇到了一个问题，用户可以将选项卡拖到另一个应用程序中，例如 Google Chrome 的搜索栏或任何其他接受纯文本的输入，它将粘贴 JSON。我想阻止应用程序删除信息，除非它位于同一应用程序的选项卡上。

    $(document).on('dragstart', '.tabpane li', function(e) {
        e.originalEvent.dataTransfer.setData('text/plain', JSON.stringify(dummyGetTabAsJSON($(this))));
        ...
    });

    // Allow tabs as drop targets
    $(document).on('dragover', '.tabpane li', function(e) {
        e.preventDefault();
    });

    $(document).on('drop', '.tabpane li', function(e) {
        // TODO: Prevent dropping of tab JSON into other applications or inputs
        var data = dummyCreateTabFromJSON(JSON.parse(e.originalEvent.dataTransfer.getData('text/plain')));
        ...
    });

【问题讨论】：

标签： javascript html electron draggable

【解决方案1】：

来自Mozilla docs：

"拖动自定义数据

您还可以使用您为自定义目的编写的其他类型。您应该努力始终包含纯文本替代方案，除非被拖动的对象特定于特定站点或应用程序。在这种情况下，自定义类型可确保数据不会被丢弃到其他地方。”

e.originalEvent.dataTransfer.setData('customtext', JSON.stringify(dummyGetTabAsJSON($(this))));
...
var data = dummyCreateTabFromJSON(JSON.parse(e.originalEvent.dataTransfer.getData('customtext')));

【讨论】：