Jquery ui 使用jqueryui拖放Div列和Div行

我们正在使用HTMLdiv创建一个表结构，在其中我们需要拖放列和行，但是行头应该是固定的。即，在不移动行头的情况下拖放Div列和Div行 任何人都知道如何解决这个问题

我需要使用JQuery、html和css来创建它

$（函数（）{
$（“#tblcols”）。可排序({
项目：'.rtab:不是（.rtab:第一个子项）'，
光标：“指针”，
轴：‘y’，
dropOnEmpty:false，
开始：功能（e、ui）{
ui.item.addClass（“选定”）；
},
停止：功能（e、ui）{
ui.item.removeClass（“选定”）；
$（this）.find（“.rtab”）.each（函数（索引）{
如果（索引>0）{
$（this.find（“.ctab”）.eq（2）.html（index）；
}
});
}
});
});
.Table{
显示：表格；
}
.头衔{
显示：表格标题；
文本对齐：居中；
字体大小：粗体；
字体大小：较大；
}
.标题{
显示：表格行；
字体大小：粗体；
文本对齐：居中；
}
.rtab{
显示：表格行；
}
.ctab{
显示：表格单元格；
边框：实心；
边界宽度：薄；
左侧填充：5px；
右侧填充：5px；
}
.htab{
显示：表格单元格；
边框：实心；
边界宽度：薄；
左侧填充：5px；
右侧填充：5px；
}

拖动表格行和列

Sl

名字

名称

薪水

位置

一,

阿提拉

显影剂

6l

科塔亚姆

二,

蒂米

设计师

5l

瓦亚纳德

三,

丽雅

团队领导

7l

科尔兰

我有点不确定你的意思。我希望我抓住了要点，即在对项目进行排序后，希望每行的第一个单元格保持有序。下面是一个可能适合您的示例


$（函数（）{
$（“.Table.Heading”）.sortable({
项目：'>.htab:not（：eq（0））'，
光标：“指针”，
轴：“x”，
dropOnEmpty:false，
占位符：“htab占位符”，
开始：功能（e、ui）{
var ind=ui.item.index（）；
$（“.Table.rtab”）。每个（函数（）{
$（“.ctab”，this.eq（ind.css）（“不透明度”，“0.25”）；
});
ui.项目数据（“原始索引”，ind）；
},
停止：函数（）{
$（“.Table.rtab.ctab”）.css（“不透明度”）；
},
更新：功能（e、ui）{
var oInd=ui.item.data（“原始索引”）；
var cInd=ui.item.index（）；
var cols=$（“.Table.htab”）.length；
$（“.Table.rtab”）。每个（函数（）{
var cell=$（“.ctab”，this.eq（oInd.detach（）；
如果（cInd<（cols-1））{
//中柱
cell.insertBefore（$（“.ctab”，this.eq（cInd））；
}否则{
//最后一列
$（此）.append（单元格）；
}
})
}
});
$（“.Table”）.sortable({
项目：'>.rtab'，
光标：“指针”，
轴：‘y’，
dropOnEmpty:false，
开始：功能（e、ui）{
$（“.ctab”，ui.item）.eq（0.html（“”）；
},
停止：功能（e、ui）{
$（“.Table.rtab”）。每个（函数（ind，el）{
$（“.ctab”，el）.eq（0）.html（（ind+1））；
});
}
});
});
.Table{
显示：表格；
}
.头衔{
显示：表格标题；
文本对齐：居中；
字体大小：粗体；
字体大小：较大；
}
.标题{
显示：表格行；
字体大小：粗体；
文本对齐：居中；
}
.rtab{
显示：表格行；
}
.ctab{
显示：表格单元格；
边框：实心；
边界宽度：薄；
左侧填充：5px；
右侧填充：5px；
}
.htab{
显示：表格单元格；
边框：实心；
边界宽度：薄；
左侧填充：5px；
右侧填充：5px；
}
.htab.placeholder{
背景：#ccc；
宽度：20px；
}

拖动表格行和列

Sl

名字

名称

薪水

位置

一,

阿提拉

显影剂

6l

科塔亚姆

二,

蒂米

设计师

5l

瓦亚纳德

三,

丽雅

团队领导

7l

科尔兰

欢迎来到堆栈溢出。你混合了很多图书馆。我会选择一个jQuery和一个版本的jQuery UI。因此，不要使用1.8.24中的CSS，而是使用同一版本的jQueryUI1.10.2中的CSS。当我测试Sortable时，这个例子似乎对它不起作用。这是你正在使用的代码吗？您在控制台中看到任何错误吗？谢谢。对它适合我，可以拖放。我也需要这个专栏。我的控制台没有错误。我更新了我的答案。看一看，如果我们使用FiestColumn作为文本字段，它将替换为序列号，那么会有一些小的修正。因此，我将该行拖放脚本更改为以前的脚本。非常感谢。