面试题：Vue拖拽功能在复杂场景下的优化与兼容，如何处理多层嵌套元素及不同浏览器的差异？

实现思路

事件绑定：
- 使用Vue的自定义指令（v - drag）来实现拖拽功能。在指令的bind钩子函数中，绑定mousedown事件，开始拖拽操作。
- 当mousedown事件触发时，记录鼠标相对于被拖拽元素的初始位置，同时记录被拖拽元素的初始位置。
- 在document上绑定mousemove和mouseup事件，用于实时更新被拖拽元素的位置和结束拖拽操作。
处理事件冒泡和捕获：
- 在mousedown事件处理函数中，使用event.preventDefault()来阻止默认行为（如文本选中），同时阻止事件冒泡，防止影响到父元素的其他交互。
- 对于mousemove和mouseup事件，由于是绑定在document上，事件捕获阶段就会触发，因此不需要特别处理事件冒泡或捕获，只需要确保在合适的时机移除mousemove和mouseup事件监听器。
兼容性问题：
- 浏览器前缀：不同浏览器对于CSS的transform属性可能需要添加不同的前缀（如webkit -、moz -、ms -）。可以使用现代的CSS预处理器（如Sass、Less）或者PostCSS来自动添加浏览器前缀。
- 事件对象属性：某些浏览器的事件对象属性可能存在差异，例如获取鼠标位置的属性。在获取鼠标位置时，使用event.pageX和event.pageY，这两个属性在主流浏览器中都能正常工作。如果需要支持IE9及以下，可以使用event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)和event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)来获取鼠标位置。

关键部分代码示例

自定义指令：

// main.js
import Vue from 'vue';

Vue.directive('drag', {
    bind(el, binding) {
        let startX, startY, initialLeft, initialTop;
        el.style.position = 'relative';
        el.addEventListener('mousedown', (event) => {
            event.preventDefault();
            event.stopPropagation();
            startX = event.pageX;
            startY = event.pageY;
            initialLeft = parseInt(window.getComputedStyle(el).left, 10) || 0;
            initialTop = parseInt(window.getComputedStyle(el).top, 10) || 0;
            document.addEventListener('mousemove', mousemoveHandler);
            document.addEventListener('mouseup', mouseupHandler);
        });

        function mousemoveHandler(event) {
            const dx = event.pageX - startX;
            const dy = event.pageY - startY;
            el.style.transform = `translate(${initialLeft + dx}px, ${initialTop + dy}px)`;
        }

        function mouseupHandler() {
            document.removeEventListener('mousemove', mousemoveHandler);
            document.removeEventListener('mouseup', mouseupHandler);
        }
    }
});

在Vue组件中使用：

<template>
    <div id="app">
        <div v - drag>可拖拽元素</div>
    </div>
</template>

<script>
export default {
    name: 'App'
};
</script>

<style>
#app {
    padding: 20px;
}
</style>

星途面试题库

面试题：Vue拖拽功能在复杂场景下的优化与兼容，如何处理多层嵌套元素及不同浏览器的差异？

知识考点

面试题答案

实现思路

关键部分代码示例