在Bootstrap 5响应式页面中使用jQuery UI Sortable遇到的问题

先解决CDN资源问题 #

• jQuery UI的核心资源可用以下CDN：
  • CSS：https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css
  • JS：https://code.jquery.com/ui/1.13.2/jquery-ui.min.js
• 移动设备触摸支持需引入jQuery UI Touch Punch，CDN：https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js

解决左右拖拽无反应的问题 #

多列布局下Sortable默认检测逻辑不匹配Bootstrap的col排列，可通过以下配置调整：

$('.row').sortable({
  helper: 'clone', // 用克隆元素做拖拽助手，避免原布局干扰
  tolerance: 'intersect', // 拖拽元素与目标元素相交时触发排序
  forcePlaceholderSize: true, // 强制占位符拥有尺寸，提升位置识别度
  placeholder: 'sortable-placeholder col-lg-6', // 自定义占位符类，匹配col宽度
  revert: true // 拖拽结束后平滑归位
});

同时给占位符添加基础样式，方便识别：

.sortable-placeholder {
  background-color: rgba(0,0,0,0.1);
  border: 2px dashed #ccc;
}

解决移动设备无法拖拽的问题 #

jQuery UI Sortable原生不支持触摸事件，引入jQuery UI Touch Punch插件即可，它会扩展Sortable的触摸支持，无需额外修改JS代码，只需在jQuery和jQuery UI之后引入该插件。

注意事项 #

• 确保Sortable容器是.row元素，而非单个col，这样才能正确识别所有可排序子元素
• 移动设备布局（col-12）下，上述配置会自动适配，因为Touch Punch已处理触摸事件

内容的提问来源于stack exchange，提问作者Jonathan Wood