ASP.NET+JQuery父子菜单编辑器：免费拖拽Treeview类控件推荐

根据你的需求，我强烈推荐Sortable.js——这是一款轻量、免费且配置极简的拖拽库，完美匹配你对树形菜单（UL/LI）的拖拽排序、插入以及嵌套拖拽需求，完全避开你提到的“功能冗余、配置复杂、无法拖入父级”的痛点。

核心优势与功能匹配 #

• 精准覆盖你的需求：
  原生支持UL/LI结构的嵌套拖拽，能轻松实现：

  • 调整同级LI项的展示顺序
  • 将任意LI项拖入其他LI（自动作为子节点，若目标节点无子UL会自动生成）
  • 动态插入新LI项（新增元素加入DOM后，Sortable会自动识别并纳入拖拽体系）

• 配置极简，无冗余功能：
  不需要复杂的依赖或繁琐的配置项，几行代码就能搞定基础树形拖拽：

  // 假设你的根菜单UL的ID是menu-tree
  const sortable = new Sortable(document.getElementById('menu-tree'), {
    animation: 150, // 拖拽动画时长
    nested: true,   // 开启嵌套拖拽（关键配置）
    ghostClass: 'sortable-ghost', // 拖拽时的占位样式类
    dragClass: 'sortable-drag',   // 拖拽元素的临时样式类
    swapThreshold: 0.65 // 触发位置交换的阈值，优化嵌套拖拽体验
  });
  

  所有配置都是按需开启，没有多余的冗余模块，完全贴合后台管理的轻量化需求。

• 适配递归生成的菜单：
  你通过递归生成的UL/LI结构，不需要做任何特殊处理——只要根UL存在，Sortable会自动识别所有嵌套的子节点，直接初始化即可生效。

• 灵活的自定义扩展：
  如果需要配合业务逻辑（比如拖拽后同步更新数据库的MenuID、ParentID），可以通过Sortable提供的事件回调实现：

  sortable.on('end', function(evt) {
    const item = evt.item; // 拖拽的LI元素
    const parent = item.parentElement; // 拖拽后的父容器（可能是父LI的子UL）
    // 这里可以获取元素的MenuID、ParentID等信息，发送请求更新数据库
  });
  

额外提示 #

Sortable.js不依赖任何框架（比如jQuery），但也可以和Vue、React等框架配合使用；如果需要自定义拖拽时的样式，只需要给对应的类名（比如sortable-ghost）写CSS即可，非常灵活。

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