面试题：Svelte Action实现复杂自定义事件处理逻辑

Question

假设我们有一个可拖动的元素，需要通过Svelte的Action实现自定义的拖放事件处理。要求在拖放过程中，实时更新元素的位置并在特定区域放下元素时触发一个自定义事件，执行一些特定的操作（例如改变元素颜色）。请详细描述实现思路并给出关键代码片段。

Answer 1

实现思路

1. 创建Svelte Action：定义一个Svelte Action，该Action会在元素挂载时绑定相关的拖放事件，如 dragstart、dragover、drop 等。
2. 跟踪元素位置：在 dragstart 事件中记录起始位置，在 dragover 事件中根据鼠标移动实时更新元素位置。
3. 检测特定区域：在 drop 事件中，判断元素是否被放置在特定区域内。
4. 触发自定义事件：如果元素被放置在特定区域内，触发自定义事件，并在事件处理函数中执行特定操作，如改变元素颜色。

关键代码片段

1. 定义Svelte Action

<script>
    const dragAndDrop = (node, { dropZone }) => {
        let startX, startY;
        let isDragging = false;

        const handleDragStart = (e) => {
            startX = e.clientX;
            startY = e.clientY;
            isDragging = true;
        };

        const handleDragOver = (e) => {
            if (isDragging) {
                const dx = e.clientX - startX;
                const dy = e.clientY - startY;
                node.style.transform = `translate(${dx}px, ${dy}px)`;
            }
            e.preventDefault();
        };

        const handleDrop = (e) => {
            isDragging = false;
            if (dropZone.contains(e.target)) {
                node.dispatchEvent(new CustomEvent('custom-drop', { detail: { message: 'Element dropped in specific zone' } }));
            }
            e.preventDefault();
        };

        node.addEventListener('dragstart', handleDragStart);
        node.addEventListener('dragover', handleDragOver);
        node.addEventListener('drop', handleDrop);

        return {
            destroy() {
                node.removeEventListener('dragstart', handleDragStart);
                node.removeEventListener('dragover', handleDragOver);
                node.removeEventListener('drop', handleDrop);
            }
        };
    };
</script>

2. 使用Svelte Action

<div use:dragAndDrop={ { dropZone: document.getElementById('drop - zone') } } draggable="true" style="background - color: lightblue; width: 100px; height: 100px;">
    Draggable Element
</div>

<div id="drop - zone" style="background - color: lightgreen; width: 300px; height: 300px;">
    Drop Zone
</div>

<script>
    const handleCustomDrop = (e) => {
        e.target.style.backgroundColor = 'yellow';
    };

    const draggableElement = document.querySelector('[draggable="true"]');
    draggableElement.addEventListener('custom - drop', handleCustomDrop);
</script>