Vue.Draggable 拖拽方向控制完整指南axis 一个属性锁定水平与垂直拖拽【免费下载链接】Vue.DraggableVue drag-and-drop component based on Sortable.js项目地址: https://gitcode.com/gh_mirrors/vu/Vue.Draggable用 Vue.Draggable 做排序最烦的往往不是拖不动而是拖歪了任务看板上你只想上下调顺序鼠标一抖item 就斜着跑图片墙想横向滑动结果上下乱窜。其实限制拖拽方向不用自己写一行鼠标事件底层的 SortableJS 早就留好了开关——axis。axis 属性速览x、y、null 各管什么axis是 SortableJS 的原生配置项管的是拖拽元素跟着鼠标移动时允许往哪个方向走axisy只允许垂直方向移动适合任务列表、菜单排序axisx只允许水平方向移动适合图片墙、标签栏不传等效null不限制自由拖拽Vue.Draggable 没有把 axis 单独提成 prop但它的做法更省事写在标签上的非 prop 属性会被原样透传给 SortableJS。这段代码回答一个问题——你在标签上写的axis是怎么进到 Sortable 里的关键就几行见 src/vuedraggable.js// 标签上的非 prop 属性如 axis驼峰化后并入 Sortable 的 options const attributes Object.keys(this.$attrs).reduce((res, key) { res[camelize(key)] this.$attrs[key]; return res; }, {});换句话说draggable :axis...等价于直接给 Sortable 实例传axis配置中间没有任何封装层。一张表看懂方向配置一套模板跑两种方向想要的效果axis 取值容器 CSS 布局典型场景垂直排序axisy块级布局或flex-direction: column任务列表、看板、菜单排序水平排序axisxdisplay: flex横向一行图片墙、标签页、横向列表自由拖拽不传 /null随意宫格、自由画布提醒一句axis只约束移动方向布局仍由 CSS 决定。方向设成y但子项排成一行落点会非常怪——两边必须对得上。下面这段最小模板只改axis一个值就能切换两种方向保存后刷新即可看到纵向列表把y改成x立刻变成可横向滚动的横条template draggable :listitems :axisaxis :classaxis x ? row : col div v-fori in items :keyi classcell{{ i }}/div /draggable /template script export default { data() { return { axis: y, // 改成 x 试试 items: [A, B, C, D, E, F] }; } }; /script style scoped .row, .col { display: flex; gap: 8px; } .col { flex-direction: column; } .row { overflow-x: auto; } .cell { flex: 0 0 auto; /* 关键禁止子项收缩、换行 */ width: 120px; padding: 10px; background: #f0f2f5; border: 1px solid #dcdfe6; border-radius: 4px; } /styleCSS 里有两个容易忽略的点flex: 0 0 auto保证水平排列时子项不被挤窄、不折行overflow-x: auto让超出的横向列表能滚动。垂直方向则不用额外处理块级默认就往下排。动态切换 axis 的做法方向跟着状态走有的页面要按状态换方向比如窄屏走纵向、宽屏走横向。思路很直接把 axis 绑到响应式数据上布局类名跟它同源联动。这里有个好消息组件内部对$attrs有深度 watch属性一变就会调this._sortable.option(...)同步到已存在的 Sortable 实例。所以你改:axis的值即时生效不需要销毁重建组件。在上一节模板外再包一层加一排切换按钮即可跑起来点按钮就能看到列表实时改变走向template div button v-ford in [y, x, null] :keyString(d) clickaxis d {{ d null ? 自由 : (d x ? 水平 : 垂直) }} /button draggable :listitems :axisaxis :classaxis x ? row : col div v-fori in items :keyi classcell{{ i }}/div /draggable /div /template 要点只有一条方向和布局类名都由同一个响应式变量驱动别写两套判断逻辑。常见翻车现场与修复清单现象大概率原因修复设了 axis 还是两个方向都能拖属性名拼错如Axis或 CSS 布局与方向不一致用:axis精确绑定水平配 flex 横排垂直配 column 或块级横向列表子项被挤窄、折行没禁止子项收缩子项加flex: 0 0 auto 固定宽度容器加overflow-x: auto长列表拖到边缘容器不跟手自动滚动没开 SortableJS 的自动滚动透传:scrolltrue、:scroll-sensitivity50、:scroll-speed10动态改 axis 没反应写成静态字符串axisy只在初始化生效一次改成:axis绑定响应式数据确认值只能是x/y或不传最后一行的补充改完值后若 DOM 上的属性纹丝不动先看是不是少了冒号——静态属性只在初始化时生效一次绑定属性才会随数据变化同步。写在最后四句话记住方向限制一个axis搞定y垂直、x水平、不传即自由。axis 管方向CSS 管布局两者必须同向否则落点错乱。动态切换直接:axis绑响应式数据组件内部会自动同步无需重建实例。滚动不跟手时补上scroll/scroll-sensitivity/scroll-speed三件套。想深挖细节仓库内这几份资料足够核心源码 src/vuedraggable.js、官方示例 example/components/、迁移指南 与 遗留选项说明完整 API 见 README.md。【免费下载链接】Vue.DraggableVue drag-and-drop component based on Sortable.js项目地址: https://gitcode.com/gh_mirrors/vu/Vue.Draggable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考