当前位置：首页 > news >正文

计算鼠标 Y 坐标与元素中心点的距离

news 2026/5/15 0:37:01

欢迎来到本系列的第8篇。在前几篇中，我们处理了点击、滑动和异步加载。今天，我们要解放鼠标，实现**“拖拽 (Drag and Drop)”**交互。

看板（Kanban）是任务管理的经典视图。一个标准的看板包含多个“列”（如待办、进行中、已完成），用户可以通过拖拽将“任务卡片”在这些列之间移动，或者在同一列中重新排序。

本篇我们将手写一个原生看板，不依赖任何第三方库（如 React-DnD 或 Sortable.js），直接驾驭浏览器底层 API。

第一部分：HTML 结构搭建 (列与卡片)

HTML 结构反映了看板的逻辑层级：

看板容器 (.board)：横向排列所有列。

列 (.column)：包含标题和任务列表容器。

任务列表 (.task-list)：这是卡片的“放置区 (Drop Zone)”。

卡片 (.card)：这是可被拖拽的元素，必须设置 draggable="true"。

<body>

<div class="app-container">
<h1>项目任务看板</h1>
<p>试着把卡片拖动到不同的列，或者调整它们的顺序。</p>


<div id="kanban-board" class="board">

<div class="column">
<div class="column-header">
<span class="column-title">待办 (Todo)</span>
<span class="column-count">3</span>
</div>

<div class="task-list" id="todo-list">

<div class="card" draggable="true" id="card-1">
<div class="card-tag tag-design">设计</div>
<p class="card-text">设计新的登录页面 UI</p>
</div>

<div class="card" draggable="true" id="card-2">
<div class="card-tag tag-dev">开发</div>
<p class="card-text">修复 API 接口 500 错误</p>
</div>

<div class="card" draggable="true" id="card-3">
<div class="card-tag tag-test">测试</div>
<p class="card-text">编写自动化测试用例</p>
</div>
</div>
</div>

<div class="column">
<div class="column-header">
<span class="column-title">进行中 (In Progress)</span>
<span class="column-count">1</span>
</div>
<div class="task-list" id="progress-list">

<div class="card" draggable="true" id="card-4">
<div class="card-tag tag-dev">开发</div>
<p class="card-text">重构用户验证模块</p>
</div>
</div>
</div>

<div class="column">
<div class="column-header">
<span class="column-title">已完成 (Done)</span>
<span class="column-count">1</span>
</div>
<div class="task-list" id="done-list">

<div class="card" draggable="true" id="card-5">
<div class="card-tag tag-ops">运维</div>
<p class="card-text">服务器安全补丁更新</p>
</div>
</div>
</div>

</div>
</div>

</body>

第二部分：CSS 样式 (布局与拖拽反馈)

CSS 的关键在于：

使用 Flexbox 横向排列“列”。

为拖拽中的元素 (.dragging) 设置样式，以便用户知道哪个元素正在被移动。

确保 .task-list 有最小高度，否则当它为空时，用户无法将卡片拖进去。

/* --- 基础布局 --- */
body {
background-color: #f4f7f6;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: #333;
display: flex;
justify-content: center;
min-height: 100vh;
}

.app-container {
width: 100%;
max-width: 1200px;
padding: 40px 20px;
}

h1 { text-align: center; margin-bottom: 10px; }
p { text-align: center; color: #666; margin-bottom: 40px; }

/* --- 看板容器 --- */
.board {
display: flex;
gap: 20px;
align-items: flex-start; /* 让列的高度根据内容自适应，不要强制拉伸 */
overflow-x: auto; /* 移动端支持横向滚动 */
padding-bottom: 20px;
}

/* --- 列样式 --- */
.column {
background-color: #e2e4e6;
border-radius: 8px;
width: 300px; /* 固定列宽 */
flex-shrink: 0; /* 防止列被压缩 */
display: flex;
flex-direction: column;
max-height: 80vh; /* 防止列太高 */
}

.column-header {
padding: 15px;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.column-count {
background-color: rgba(0,0,0,0.1);
border-radius: 12px;
padding: 2px 8px;
font-size: 0.8em;
}

/* --- 任务列表 (Drop Zone) --- */
.task-list {
padding: 10px;
flex-grow: 1;
min-height: 100px; /* 核心：保证空列表也能接收拖拽 */
overflow-y: auto;
}

/* --- 卡片样式 --- */
.card {
background-color: #fff;
border-radius: 6px;
padding: 15px;
margin-bottom: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
cursor: grab; /* 鼠标手势：抓取 */
transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.card:active {
cursor: grabbing; /* 鼠标手势：正在抓取 */
}

/* 标签样式 */
.card-tag {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
margin-bottom: 8px;
color: white;
}
.tag-design { background-color: #ff9f43; }
.tag-dev { background-color: #54a0ff; }
.tag-test { background-color: #ee5253; }
.tag-ops { background-color: #10ac84; }

.card-text {
margin: 0;
line-height: 1.5;
}

/* --- 拖拽状态样式 (由 JS 添加) --- */
.card.dragging {
opacity: 0.5; /* 让原元素变半透明 */
border: 2px dashed #999;
box-shadow: none;
}

第三部分：JS 交互逻辑 (Drag & Drop API)

这是最神奇的部分。HTML5 拖拽 API 默认并不支持“自动排序”或“插入到指定位置”，它只告诉我们“拖了谁”和“在哪松手”。

我们需要编写一个算法来计算鼠标位置，从而决定将卡片插入到列表的哪个位置。

document.addEventListener('DOMContentLoaded', () => {

// 1. 获取所有可拖拽的卡片和容器
const draggables = document.querySelectorAll('.card');
const containers = document.querySelectorAll('.task-list');

// --- 2. 处理卡片的拖拽事件 ---
draggables.forEach(draggable => {

// 开始拖拽
draggable.addEventListener('dragstart', () => {
// 添加类名，改变样式
draggable.classList.add('dragging');
});

// 结束拖拽
draggable.addEventListener('dragend', () => {
// 移除类名
draggable.classList.remove('dragging');
});
});

// --- 3. 处理容器的放置事件 ---
containers.forEach(container => {

// 当有元素在容器上方拖动时触发
container.addEventListener('dragover', (e) => {
// 核心：默认情况下，浏览器禁止将元素 Drop 到另一个元素内
// 我们必须阻止默认行为，才能允许 Drop
e.preventDefault();

// 获取当前正在被拖拽的元素
const afterElement = getDragAfterElement(container, e.clientY);
const draggable = document.querySelector('.dragging');

// 核心逻辑：决定插入位置
// 如果 afterElement 为 null，说明我们在列表最下方，直接 append
// 否则，插在 afterElement 之前
if (afterElement == null) {
container.appendChild(draggable);
} else {
container.insertBefore(draggable, afterElement);
}
});
});

// --- 4. 辅助算法：计算插入位置 ---
// 这个函数的作用是：根据鼠标的 Y 坐标，找到鼠标下方的那个元素
// 这样我们就知道该把拖拽元素插到哪里了
function getDragAfterElement(container, y) {

// 获取容器内所有 *没有* 被拖拽的卡片
// 这里的 :not(.dragging) 很重要，排除掉自己
const draggableElements = [...container.querySelectorAll('.card:not(.dragging)')];

// 使用 reduce 循环，找出距离鼠标最近的那个元素
return draggableElements.reduce((closest, child) => {
const box = child.getBoundingClientRect();

// 计算鼠标 Y 坐标与元素中心点的距离
// offset < 0 表示鼠标在元素中心点上方
const offset = y - box.top - box.height / 2;

// 我们只关心鼠标在元素上方的情况 (offset < 0)
// 并且要找那个距离最近的 (offset 最大，最接近 0)
if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child };
} else {
return closest;
}
}, { offset: Number.NEGATIVE_INFINITY }).element;
}

});

总结

恭喜！您刚刚手写了一个功能完备的看板系统。

我们学到了：

HTML5 Drag and Drop API：dragstart 用于标记源元素，dragover 用于实时计算位置，appendChild 用于移动 DOM 元素（是的，移动 DOM 不需要删除再新建，直接 append 就会自动移动）。

位置计算算法：如何利用 getBoundingClientRect 和鼠标坐标 clientY 来精确定位插入点。这是所有排序类 UI 库的核心原理。

掌握了这个，您就可以轻松实现列表排序、文件上传拖拽等高级交互功能。

https://weibo.com/ttarticle/p/show?comment=1&id=2309405298576313156115
https://weibo.com/ttarticle/p/show?id=2309405298576372138533
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298576372138533
https://weibo.com/ttarticle/p/show?id=2309405298576435052651
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298576435052651
https://weibo.com/ttarticle/p/show?id=2309405298576493773343
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298576493773343
https://weibo.com/ttarticle/p/show?id=2309405298576556425335
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298576556425335
https://weibo.com/ttarticle/p/show?id=2309405298576615145803
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298576615145803
https://weibo.com/ttarticle/p/show?id=2309405298576678060606
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298576678060606
https://weibo.com/ttarticle/p/show?id=2309405298576741236862
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298576741236862
https://weibo.com/ttarticle/p/show?id=2309405298576808083580
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298576808083580
https://weibo.com/ttarticle/p/show?id=2309405298576879386717
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298576879386717
https://weibo.com/ttarticle/p/show?id=2309405298576938369468
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298576938369468
https://weibo.com/ttarticle/p/show?id=2309405298577018061381
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298577018061381
https://weibo.com/ttarticle/p/show?id=2309405298577080713405
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298577080713405
https://weibo.com/ttarticle/p/show?id=2309405298577139695884
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298577139695884
https://weibo.com/ttarticle/p/show?id=2309405298577198154150
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298577198154150
https://weibo.com/ttarticle/p/show?id=2309405298577256874290
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298577256874290
https://weibo.com/ttarticle/p/show?id=2309405298577315856796
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298577315856796
https://weibo.com/ttarticle/p/show?id=2309405298577374577119
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298577374577119
https://weibo.com/ttarticle/p/show?id=2309405298577433035115
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298577433035115
https://weibo.com/ttarticle/p/show?id=2309405298577492017715
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298577492017715
https://weibo.com/ttarticle/p/show?id=2309405298577554669583
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298577554669583
https://weibo.com/ttarticle/p/show?id=2309405298577613390032
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298577613390032
https://weibo.com/ttarticle/p/show?id=2309405298577676566657
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298577676566657
https://weibo.com/ttarticle/p/show?id=2309405298577777230205
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298577777230205
https://weibo.com/ttarticle/p/show?id=2309405298577839882415
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298577839882415
https://weibo.com/ttarticle/p/show?id=2309405298577898865083
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298577898865083
https://weibo.com/ttarticle/p/show?id=2309405298577961779620
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298577961779620
https://weibo.com/ttarticle/p/show?id=2309405298578037014592
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298578037014592
https://weibo.com/ttarticle/p/show?id=2309405298578112774760
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298578112774760
https://weibo.com/ttarticle/p/show?id=2309405298578280546478
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298578280546478
https://weibo.com/ttarticle/p/show?id=2309405298578406113505
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298578406113505
https://weibo.com/ttarticle/p/show?id=2309405298578481611015
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298578481611015
https://weibo.com/ttarticle/p/show?id=2309405298578578079767
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298578578079767
https://weibo.com/ttarticle/p/show?id=2309405298578653840277
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298578653840277
https://weibo.com/ttarticle/p/show?id=2309405298578725142729
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298578725142729
https://weibo.com/ttarticle/p/show?id=2309405298578787795079
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298578787795079
https://weibo.com/ttarticle/p/show?id=2309405298578850971919
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298578850971919
https://weibo.com/ttarticle/p/show?id=2309405298578913886699
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298578913886699
https://weibo.com/ttarticle/p/show?id=2309405298578989383819
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298578989383819
https://weibo.com/ttarticle/p/show?id=2309405298579064619024
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298579064619024
https://weibo.com/ttarticle/p/show?id=2309405298579848954326
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298579848954326
https://weibo.com/ttarticle/p/show?id=2309405298579983171995
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298579983171995
https://weibo.com/ttarticle/p/show?id=2309405298580063125725
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298580063125725
https://weibo.com/ttarticle/p/show?id=2309405298580134166596
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298580134166596
https://weibo.com/ttarticle/p/show?id=2309405298580192887174
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298580192887174
https://weibo.com/ttarticle/p/show?id=2309405298580276772892
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298580276772892
https://weibo.com/ttarticle/p/show?id=2309405298580381892639
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298580381892639
https://weibo.com/ttarticle/p/show?id=2309405298580461322475
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298580461322475
https://weibo.com/ttarticle/p/show?id=2309405298580553859519
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298580553859519
https://weibo.com/ttarticle/p/show?id=2309405298580625162448
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298580625162448
https://weibo.com/ttarticle/p/show?id=2309405298580683883082
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298580683883082
https://weibo.com/ttarticle/p/show?id=2309405298581132411044
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298581132411044
https://weibo.com/ttarticle/p/show?id=2309405298581291794761
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298581291794761
https://weibo.com/ttarticle/p/show?id=2309405298581375680706
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298581375680706
https://weibo.com/ttarticle/p/show?id=2309405298581434401229
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298581434401229
https://weibo.com/ttarticle/p/show?id=2309405298581497577948
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298581497577948
https://weibo.com/ttarticle/p/show?id=2309405298581560230116
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298581560230116
https://weibo.com/ttarticle/p/show?id=2309405298581627338978
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298581627338978
https://weibo.com/ttarticle/p/show?id=2309405298581690253366
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298581690253366
https://weibo.com/ttarticle/p/show?id=2309405298581753167957
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298581753167957
https://weibo.com/ttarticle/p/show?id=2309405298581820539194
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298581820539194
https://weibo.com/ttarticle/p/show?id=2309405298588405596626
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298588405596626
https://weibo.com/ttarticle/p/show?id=2309405298588472443212
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298588472443212
https://weibo.com/ttarticle/p/show?id=2309405298588535619826
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298588535619826
https://weibo.com/ttarticle/p/show?id=2309405298588606660923
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298588606660923
https://weibo.com/ttarticle/p/show?id=2309405298588669575829
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298588669575829
https://weibo.com/ttarticle/p/show?id=2309405298588736946324
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298588736946324
https://weibo.com/ttarticle/p/show?id=2309405298588799860915
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298588799860915
https://weibo.com/ttarticle/p/show?id=2309405298588866970129
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298588866970129
https://weibo.com/ttarticle/p/show?id=2309405298588950593907
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298588950593907
https://weibo.com/ttarticle/p/show?id=2309405298589017965062
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298589017965062
https://weibo.com/ttarticle/p/show?id=2309405298589085074328
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298589085074328
https://weibo.com/ttarticle/p/show?id=2309405298589152182738
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298589152182738
https://weibo.com/ttarticle/p/show?id=2309405298589261234523
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298589261234523
https://weibo.com/ttarticle/p/show?id=2309405298589328080902
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298589328080902
https://weibo.com/ttarticle/p/show?id=2309405298589390995709
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298589390995709
https://weibo.com/ttarticle/p/show?id=2309405298589453910144
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298589453910144
https://weibo.com/ttarticle/p/show?id=2309405298589516825206
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298589516825206
https://weibo.com/ttarticle/p/show?id=2309405298589583933573
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298589583933573
https://weibo.com/ttarticle/p/show?id=2309405298589646848295
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298589646848295
https://weibo.com/ttarticle/p/show?id=2309405298589713956883
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298589713956883
https://weibo.com/ttarticle/p/show?id=2309405298589776872042
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298589776872042
https://weibo.com/ttarticle/p/show?id=2309405298589839786450
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298589839786450
https://weibo.com/ttarticle/p/show?id=2309405298589902963379
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298589902963379
https://weibo.com/ttarticle/p/show?id=2309405298589969809716
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298589969809716
https://weibo.com/ttarticle/p/show?id=2309405298590036918482
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298590036918482
https://weibo.com/ttarticle/p/show?id=2309405298590100095363
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298590100095363
https://weibo.com/ttarticle/p/show?id=2309405298590163010188
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298590163010188
https://weibo.com/ttarticle/p/show?id=2309405298590230118871
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298590230118871
https://weibo.com/ttarticle/p/show?id=2309405298590296965864
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298590296965864
https://weibo.com/ttarticle/p/show?id=2309405298590359880120
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298590359880120
https://weibo.com/ttarticle/p/show?id=2309405298590422794383
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298590422794383
https://weibo.com/ttarticle/p/show?id=2309405298590485708854
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298590485708854
https://weibo.com/ttarticle/p/show?id=2309405298590548885748
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298590548885748
https://weibo.com/ttarticle/p/show?id=2309405298590611800076
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298590611800076
https://weibo.com/ttarticle/p/show?id=2309405298590821253205
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298590821253205
https://weibo.com/ttarticle/p/show?id=2309405298590930305732
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298590930305732
https://weibo.com/ttarticle/p/show?id=2309405298591060590746
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298591060590746
https://weibo.com/ttarticle/p/show?id=2309405298591215517791
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298591215517791
https://weibo.com/ttarticle/p/show?id=2309405298591433621901
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298591433621901
https://weibo.com/ttarticle/p/show?id=2309405298591597199934
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298591597199934
https://weibo.com/ttarticle/p/show?id=2309405298591769165872
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298591769165872
https://weibo.com/ttarticle/p/show?id=2309405298592104710888
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298592104710888
https://weibo.com/ttarticle/p/show?id=2309405298592259899799
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298592259899799
https://weibo.com/ttarticle/p/show?id=2309405298592398573677
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298592398573677
https://weibo.com/ttarticle/p/show?id=2309405298592465682997
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298592465682997
https://weibo.com/ttarticle/p/show?id=2309405298592679592015
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298592679592015
https://weibo.com/ttarticle/p/show?id=2309405298592742245085
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298592742245085
https://weibo.com/ttarticle/p/show?id=2309405298592855490735
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298592855490735
https://weibo.com/ttarticle/p/show?id=2309405298592927056737
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298592927056737
https://weibo.com/ttarticle/p/show?id=2309405298593216462953
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298593216462953
https://weibo.com/ttarticle/p/show?id=2309405298593505607914
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298593505607914
https://weibo.com/ttarticle/p/show?id=2309405298593832763472
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298593832763472
https://weibo.com/ttarticle/p/show?id=2309405298594042740872
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298594042740872
https://weibo.com/ttarticle/p/show?id=2309405298594269233611
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298594269233611
https://weibo.com/ttarticle/p/show?id=2309405298594495725946
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298594495725946
https://weibo.com/ttarticle/p/show?id=2309405298594667430353
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298594667430353
https://weibo.com/ttarticle/p/show?id=2309405298594734539394
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298594734539394
https://weibo.com/ttarticle/p/show?id=2309405298594801909776
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298594801909776
https://weibo.com/ttarticle/p/show?id=2309405298594872950924
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298594872950924
https://weibo.com/ttarticle/p/show?id=2309405298594944253963
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298594944253963

https://weibo.com/ttarticle/p/show?id=2309405298629182619708
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298629182619708
https://weibo.com/ttarticle/p/show?id=2309405298629303992401
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298629303992401
https://weibo.com/ttarticle/p/show?id=2309405298629404655922
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298629404655922
https://weibo.com/ttarticle/p/show?id=2309405298629509775489
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298629509775489
https://weibo.com/ttarticle/p/show?id=2309405298629614633413
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298629614633413
https://weibo.com/ttarticle/p/show?id=2309405298629719490955
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298629719490955
https://weibo.com/ttarticle/p/show?id=2309405298629832737274
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298629832737274
https://weibo.com/ttarticle/p/show?id=2309405298629945983106
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298629945983106
https://weibo.com/ttarticle/p/show?id=2309405298630055034944
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298630055034944
https://weibo.com/ttarticle/p/show?id=2309405298630159892566
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298630159892566
https://weibo.com/ttarticle/p/show?id=2309405298630268682297
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298630268682297
https://weibo.com/ttarticle/p/show?id=2309405298630377734152
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298630377734152
https://weibo.com/ttarticle/p/show?id=2309405298630511951902
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298630511951902
https://weibo.com/ttarticle/p/show?id=2309405298630621266095
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298630621266095
https://weibo.com/ttarticle/p/show?id=2309405298630726123623
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298630726123623
https://weibo.com/ttarticle/p/show?id=2309405298631053017149
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298631053017149
https://weibo.com/ttarticle/p/show?id=2309405298631157874802
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298631157874802
https://weibo.com/ttarticle/p/show?id=2309405298631292092504
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298631292092504
https://weibo.com/ttarticle/p/show?id=2309405298631451738179
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298631451738179
https://weibo.com/ttarticle/p/show?id=2309405298631560528069
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298631560528069
https://weibo.com/ttarticle/p/show?id=2309405298631690813481
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298631690813481
https://weibo.com/ttarticle/p/show?id=2309405298631808253982
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298631808253982
https://weibo.com/ttarticle/p/show?id=2309405298631938277488
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298631938277488
https://weibo.com/ttarticle/p/show?id=2309405298632059650090
https://weibo.com/ttarticle/p/show?comment=1&id=2309405298632059650090