SOURCE

let move = document.querySelector('.flex div');
move.onmousedown = function (e) {
    // console.log(e);
    if (e.which != 1) return false;
    let clickX = e.offsetX;
    let clickY = e.offsetY;
    document.querySelector('body').onmousemove = function (event) {
        console.log(event);
        move.style.position = "fixed";
        // move.style.left = event.pageX - clickX + 'px';
        // move.style.top = event.pageY - clickY + 'px';
        move.style.left = event.clientX - clickX + 'px';
        move.style.top = event.clientY - clickY + 'px';
    }
}
document.onmouseup = function () {
    document.querySelector('body').onmousemove = null;
}



console.log(move);

<div class="box">
	<!-- <div class="move"></div> -->
	<table>
		<thead>
			<tr>
				<th>姓名</th>
				<th>证件类型</th>
				<th>证件号码</th>
				<th>电话</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>张三</td>
				<td>护照</td>
				<td>789</td>
				<td>15566664444</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>护照</td>
				<td>123</td>
				<td>14466664444</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>其他</td>
				<td>456</td>
				<td>13366664444</td>
			</tr>
		</tbody>
	</table>
	<div class="flex">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</div>
</div>

.box {
    height: 50vh;
    background: saddlebrown;
}

.move {
    width: 100px;
    height: 100px;
    background: aquamarine;
    position: fixed;
    top: 100px;
    left: 200px;
    cursor: pointer;
}

table{
    width: 100%;
}
td,th{
    padding: 5px 10px;
}

thead th:nth-of-type(1){
    width: 20%;
}

.flex{
    display: flex;
}
.flex div{
    border: 1px solid forestgreen;
    user-select: none;
    flex: 1;
}