js原生实现元素块满屏拖动（鼠标按下跟着鼠标移动鼠标松开结束拖动）

1.style部分

.dragBox{
    width: 200px;
    height: 200px;
    background-color:rgba(0,0,0,0.1);
    border-radius: 10px;
    position: fixed;/*一定要加*/
    cursor: move;
}

2.html部分

 <!-- 要移动的元素 -->
 <div class="dragBox" id="dragBox"></div>

3.js部分

dragFunction('dragBox')

function dragFunction(ElementId){
   const draggableElement = document.getElementById(ElementId);

   let isDragging = false;
   let initialX, initialY;

   //鼠标按下去记住鼠标位置
   draggableElement.addEventListener('mousedown', (event) => {
        isDragging = true;
        initialX = event.clientX - draggableElement.offsetLeft;
        initialY = event.clientY - draggableElement.offsetTop;
    });

    //鼠标移动
    document.addEventListener('mousemove', (event) => {
        if (isDragging) {
            const x = event.clientX - initialX;
            const y = event.clientY - initialY;
            
            // 确保元素在视口内
            const maxX = window.innerWidth - draggableElement.offsetWidth;
            const maxY = window.innerHeight - draggableElement.offsetHeight;

            draggableElement.style.left = Math.min(Math.max(0, x), maxX) + 'px';
            draggableElement.style.top = Math.min(Math.max(0, y), maxY) + 'px';
        }
     });

     document.addEventListener('mouseup', () => {
        isDragging = false;
     });
}

以上代码就可以实现自由拖拽功能，比如做智能助手，文章语音播放等都可。