Question

我正在开发一种电子应用程序，其中用户使用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')));
        ...
    });

Answer 1

来自Mozilla docs：

“ 拖动自定义数据

您也可以将其他组成的类型用于自定义目的。除非被拖动的对象特定于特定站点或应用程序，否则您应努力始终包括纯文本替代方法。在这种情况下，自定义类型可确保不能将数据删除到其他位置。”

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

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

1 个答案: