手动拖拽编程可以通过以下步骤实现：
让元素捕获事件
单击并不释放鼠标，触发 `mousedown` 事件，标记开始拖拽，并获取元素和鼠标的位置。
拖动鼠标，触发 `mousemove` 事件，不断地获取鼠标的位置，并通过计算重新确定元素的位置。
释放鼠标，触发 `mouseup` 事件，结束拖拽，确定元素位置并更新。
绑定事件
对拖拽的元素绑定 `mousedown` 事件，使其触发对应的函数，获取元素与鼠标的位置。
在 `document` 对象上绑定 `mousemove` 和 `mouseup` 事件，不在拖拽的元素上绑定是因为当鼠标移动太快而超出元素的范围时会停止拖拽，而绑定在 `document` 上则可以避免这样的事情发生。
```javascript
// 获取元素
var box = document.getElementById（'box'）；
// 定义拖拽开始时的位置
var startX = 0；
var startY = 0；
// 定义拖拽状态
var isDragging = false；
// 绑定 mousedown 事件
box.onmousedown = function（event） {
// 获取鼠标位置
var mouseX = event.clientX；
var mouseY = event.clientY；
// 记录开始拖拽的位置
startX = mouseX - box.offsetLeft；
startY = mouseY - box.offsetTop；
// 标记开始拖拽
isDragging = true；
}；
// 绑定 mousemove 事件
document.onmousemove = function（event） {
if （!isDragging） return；
// 获取当前鼠标位置
var currentX = event.clientX；
var currentY = event.clientY；
// 计算元素的新位置
var newX = currentX - startX；
var newY = currentY - startY；
// 更新元素位置
box.style.left = newX + 'px'；
box.style.top = newY + 'px'；
}；
// 绑定 mouseup 事件
document.onmouseup = function（） {
// 结束拖拽
isDragging = false；
}；
```
HTML 结构
```html