// 获取被拖拽元素const draggedElement = document.querySelector(this.drag.draggedSel)
draggedElement.addEventListener('mousedown', (e) => {
let isDragging = true // 鼠标相对被拖拽元素的位置 const offsetX = e.clientX - draggedElement.offsetLeft const offsetY = e.clientY - draggedElement.offsetTop document.addEventListener('mousemove', (e) => {
if (isDragging) {
// 计算被拖拽元素的新位置 let left = e.clientX - offsetX let top = e.clientY - offsetY // 获取窗口的宽度和高度 const windowWidth = window.innerWidth const windowHeight = window.innerHeight //限制被拖拽元素在窗口内移动 if (left <0) {
left =0 }
if (top <0) {
top =0 }
if (left + draggedElement.offsetWidth > windowWidth) {
left = windowWidth - draggedElement.offsetWidth }
if (top + draggedElement.offsetHeight > windowHeight) {
top = windowHeight - draggedElement.offsetHeight }
// 更新被拖拽元素的位置 draggedElement.style.left = left + 'px'
draggedElement.style.top = top + 'px'
}
})
document.addEventListener('mouseup', () => {
isDragging = false })
})
//监听页面大小变化window.addEventListener('resize', () => {
// 获取窗口的宽度和高度 const windowWidth = window.innerWidth const windowHeight = window.innerHeight // 获取被拖拽元素的当前位置 let currentLeft = parseInt(getComputedStyle(draggedElement).left)
let currentTop = parseInt(getComputedStyle(draggedElement).top)
//限制被拖拽元素在窗口内移动 if (currentLeft + draggedElement.offsetWidth > windowWidth) {
currentLeft = windowWidth - draggedElement.offsetWidth }
if (currentTop + draggedElement.offsetHeight > windowHeight) {
currentTop = windowHeight - draggedElement.offsetHeight }
// 更新被拖拽元素的位置 draggedElement.style.left = currentLeft + 'px'
draggedElement.style.top = currentTop + 'px'
})
}
}
代码说明上面是一个使用Vue的组件，其中data函数返回了一个drag对象，包括了被拖拽元素的选择器和顶部navBar的高度。在mounted生命周期钩子中，监听了被拖拽元素的mousedown事件，并且在mousemove和mouseup事件中进行了对应的处理。
功能实现以上代码实现了以下功能：
1. 监听被拖拽元素的mousedown事件，获取鼠标相对被拖拽元素的位置，并在mousemove事件中计算被拖拽元素的新位置，以实现元素的拖拽功能。
2. 在mousemove事件中，限制了被拖拽元素在窗口内移动，避免超出窗口边界。
3. 在mouseup事件中，取消了对元素的拖拽状态。
4. 监听了窗口的resize事件，当窗口大小变化时，限制了被拖拽元素在窗口内移动，以适应新的窗口大小。
功能拓展以上代码实现了基本的拖拽功能，接下来可以进一步拓展实现吸附窗口边界的功能。当被拖拽元素靠近窗口边界时，自动吸附到窗口边界上。代码如下：
```javascriptdocument.addEventListener('mousemove', (e) => {
if (isDragging) {
let left = e.clientX - offsetX let top = e.clientY - offsetY // 获取窗口的宽度和高度 const windowWidth = window.innerWidth const windowHeight = window.innerHeight // 计算边界位置 const boundary =10 // 判断是否进入吸附范围 if (left < boundary) {
left =0 }
if (top < boundary) {
top =0 }
if (windowWidth - left - draggedElement.offsetWidth < boundary) {
left = windowWidth - draggedElement.offsetWidth }
if (windowHeight - top - draggedElement.offsetHeight < boundary) {
top = windowHeight - draggedElement.offsetHeight }
// 更新被拖拽元素的位置 draggedElement.style.left = left + 'px'
draggedElement.style.top = top + 'px'
}
})
```
代码说明在mousemove事件中增加了对吸附窗口边界的判断，当被拖拽元素靠近窗口边界时，自动吸附到窗口边界上。boundary变量用于设置吸附范围，当被拖拽元素进入吸附范围内时，更新被拖拽元素的位置，使其吸附到窗口边界上。
功能测试通过以上代码实现了模拟微信视频缩略图拖拽吸附窗口边界的功能。当拖拽视频缩略图时，如果靠近窗口边界，视频缩略图会自动吸附到窗口边界上，有效避免了视频缩略图超出窗口边界的情况。
综上所述，通过以上代码可以轻松实现模拟微信视频缩略图拖拽吸附窗口边界的功能，提升用户体验。
