寻找jQuery UI Draggable组件的现代替代方案（.NET Razor Pages场景）

针对你的.NET Razor Pages场景（Bootstrap 5栅格，row下的col-lg-6元素），推荐几个比jQuery UI更现代的拖拽排序组件，都是无依赖或轻量型，完美适配当前技术栈：

1. SortableJS #

目前最受欢迎的轻量级拖拽排序库之一，完全无依赖（也可兼容jQuery），天生支持响应式布局，和Bootstrap 5的栅格系统契合度极高。支持触摸操作，配置灵活，能快速实现你的需求。

示例代码（针对你的DOM结构）：

// 初始化.row容器内的拖拽排序
const sortable = new Sortable(document.querySelector('.row'), {
  animation: 150, // 拖拽动画时长
  ghostClass: 'sortable-ghost', // 拖拽时的占位符样式，可结合Bootstrap自定义
  chosenClass: 'shadow-sm', // 选中元素的高亮样式，直接用Bootstrap的阴影类
  dragClass: 'opacity-75' // 拖拽中的元素透明度，用Bootstrap的opacity类
});

// 获取排序后的元素顺序（比如用元素的id属性）
const sortedIds = sortable.toArray();
// 可将sortedIds提交到后端保存排序

2. Interact.js #

功能更全面的拖拽交互库，除了排序还支持缩放、旋转等操作，无任何依赖，适合需要自定义交互逻辑的场景。对Bootstrap的栅格元素支持友好。

示例代码：

// 给每个.col-lg-6绑定拖拽和放置逻辑
interact('.col-lg-6')
  .draggable({
    inertia: true,
    // 限制拖拽范围在.row容器内
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: '.row',
        endOnly: true
      })
    ],
    autoScroll: true,
    listeners: {
      move: dragMoveListener,
      end: () => {
        // 拖拽结束后的清理或提交逻辑
      }
    }
  })
  .dropzone({
    accept: '.col-lg-6',
    overlap: 0.5,
    listeners: {
      drop: (event) => {
        const draggedEl = event.relatedTarget;
        const targetEl = event.target;
        // 交换两个col元素的位置
        if (draggedEl !== targetEl) {
          const parent = draggedEl.parentNode;
          const siblings = Array.from(parent.children);
          const draggedIndex = siblings.indexOf(draggedEl);
          const targetIndex = siblings.indexOf(targetEl);
          parent.insertBefore(draggedEl, draggedIndex < targetIndex ? targetEl.nextSibling : targetEl);
        }
      }
    }
  });

// 处理拖拽中的元素位移
function dragMoveListener(event) {
  const target = event.target;
  const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
  const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
  target.style.transform = `translate(${x}px, ${y}px)`;
  target.setAttribute('data-x', x);
  target.setAttribute('data-y', y);
}

3. Draggable by Shopify #

Shopify开源的轻量级拖拽库，专注于拖拽排序功能，无依赖，API简洁，动画流畅，适合快速集成。

示例代码：

const sortableContainer = new Draggable.Sortable(document.querySelector('.row'), {
  draggable: '.col-lg-6', // 指定可拖拽的元素类
  animation: 150,
  ghostClass: 'bg-light border border-primary' // 用Bootstrap样式定义占位符
});

// 监听排序完成事件
sortableContainer.on('sortable:stop', (event) => {
  const sortedElements = event.toArray();
  // 处理排序后的提交逻辑
});

额外提示：关于jQuery UI的兼容性 #

虽然jQuery UI Sortable标注兼容jQuery 1.8+，但实际在jQuery 3.5.1版本中大多能正常运行，只是部分老旧的废弃API可能会触发警告。如果你对现有jQuery UI的效果满意，可以先在当前项目中做测试，确认是否存在兼容性问题，再决定是否替换。

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