拖拽图块编程可以通过以下步骤实现：
监听鼠标事件
`mousedown`：当鼠标按下时，记录下初始位置和状态。
`mousemove`：当鼠标移动时，计算移动的距离，并更新图块的位置。
`mouseup`：当鼠标释放时，结束拖拽操作。
计算图块位置
使用`offset（）`方法获取图块相对于父容器的位置。
使用`clientX`和`clientY`获取鼠标相对于整个文档的位置。
通过比较鼠标按下和移动后的位置，计算出图块移动的偏移量，并更新图块的位置。
实现拖拽效果
在`mousedown`事件中，设置一个标志位来表示图块是否正在被拖拽。
在`mousemove`事件中，如果图块正在被拖拽，则更新图块的位置，并实时显示图块的新位置。
在`mouseup`事件中，清除拖拽标志位，结束拖拽操作。
```html