我如何制作一个浮动窗口，使其保持在程序上方，可移动并接受来自另一个脚本的输入

Question

我正在尝试构建一个 indesign 脚本，该脚本将生成一个可以显示报告结果的浮动窗口。我需要将其用作检查“表”，使其保持可见且可移动。当我修复窗口显示的错误时，它需要保持活动状态。我知道，这很令人困惑。

我有警报窗口会弹出并成功显示报告结果，但我必须关闭该窗口（包含所有新信息）才能在我的 inDesign 文档中进行更改。我只是不知道为了使这项工作顺利进行，我没有说哪些关键词。我是编码新手。

Answer 1

您可以借助 javscript 和 css 创建浮动窗口。

这是一个使用基本 javascript 和 css 创建的示例浮动窗口。您还可以添加最小化功能来保持窗口最小化

 const windowElement = document.getElementById('window');
    let isDragging = false;
    let initialX;
    let initialY;

    windowElement.addEventListener('mousedown', startDragging);
    windowElement.addEventListener('mouseup', stopDragging);
    windowElement.addEventListener('mousemove', drag);

    function startDragging(e) {
        isDragging = true;
        initialX = e.clientX - windowElement.getBoundingClientRect().left;
        initialY = e.clientY - windowElement.getBoundingClientRect().top;
    }

    function stopDragging() {
        isDragging = false;
    }

    function drag(e) {
        if (isDragging) {
            const newX = e.clientX - initialX;
            const newY = e.clientY - initialY;
            windowElement.style.left = `${newX}px`;
            windowElement.style.top = `${newY}px`;
        }
    }

    
     body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }

    .window {
        position: absolute;
        width: 300px;
        height: 200px;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        cursor: move;
    }

<div class="window" id="window">
    <div class="window-header" style="background-color: #ccc; padding: 5px;">
        <span>Drag me!</span>
    </div>
    <div class="window-content" style="padding: 10px;">
        <!-- Your content goes here -->
        This is a movable floating window.
    </div>
</div>