制作类似下图中的拖拽排序功能：
1. 首先数据库该表中添加字段 sort，类型为 double（MySQL 中为 double(0, 0)）。
2. 页面输出绑定数据（以 ASP.NET MVC 控制器为例）：
public ActionResult EditSort()
{
if (!zConsole.Logined) { return RedirectToAction("", "SignIn", new { redirect = Request.Url.OriginalString }); }
db_auto2018Entities db = new db_auto2018Entities();
return View(db.dt_dealer.Where(c => c.enabled).OrderBy(c => c.sort));
}这里可以加条件列出，即示例中 enabled == true 的数据。
3. 前台页面引用 jQuery 和 jQuery UI。
4. 使用 <ul /> 列出数据：
<ul id="sortable" class="list-group gutter list-group-lg list-group-sp">
@foreach (var d in Model)
{
<li class="list-group-item" draggable="true" data-id="@d.id">
<span class="pull-left"><i class="fa fa-sort text-muted fa m-r-sm"></i> </span>
<div class="clear">
【id=@d.id】@d.name_full
</div>
</li>
}
</ul>5. 初始化 sortable，当拖拽结束时保存次序：
<script>
var url_SaveSort = '@Url.Action("SaveSort")';
</script>
<script>
$("#sortable").sortable({
stop: function (event, ui) {
// console.log('index: ' + $(ui.item).index())
// console.log('id: ' + $(ui.item).data('id'))
// console.log('prev_id: ' + $(ui.item).prev().data('id'))
$.post(url_SaveSort, {
id: $(ui.item).data('id'),
prev_id: $(ui.item).prev().data('id')
}, function (json) {
if (json.result.success) {
// window.location.reload();
} else {
toastr["error"](json.result.info);
}
}, 'json');
}
});
$("#sortable").disableSelection();
</script>这里回传到服务端的参数为：当前项的 id 值、拖拽后其前面一项的 prev_id 值（若移至首项则 prev_id 为 undefined）。
不使用 $(ui.item).index() 是因为，在有筛选条件的结果集中排序时，使用该索引值配合 LINQ 的 .Skip 会引起取值错误。
6. 控制器接收并保存至数据库：
[HttpPost]
public ActionResult SaveSort(int id, int? prev_id)
{
if (!zConsole.Logined)
{
return Json(new { result = new { success = false, msg = "请登录后重试！" } }, JsonRequestBehavior.AllowGet);
}
db_auto2018Entities db = new db_auto2018Entities();
dt_dealer d = db.dt_dealer.Find(id);
// 拖拽后其前项 sort 值（若无则 null）（此处不需要加 enabled 等筛选条件）
double? prev_sort = prev_id.HasValue
? db.dt_dealer.Where(c => c.id == prev_id).Select(c => c.sort).Single()
: null as double?;
// 拖拽后其后项 sort 值（若无前项则取首项作为后项）（必须强制转化为 double?，否则无后项时会返回 0，导致逻辑错误）
double? next_sort = prev_id.HasValue
? db.dt_dealer.Where(c => c.sort > prev_sort && c.id != id).OrderBy(c => c.sort).Select(c => (double?)c.sort).FirstOrDefault()
: db.dt_dealer.Where(c => c.id != id).OrderBy(c => c.sort).Select(c => (double?)c.sort).FirstOrDefault();
if (prev_sort.HasValue && next_sort.HasValue)
{
d.sort = (prev_sort.Value + next_sort.Value) / 2;
}
if (prev_sort == null && next_sort.HasValue)
{
d.sort = next_sort.Value - 1;
}
if (prev_sort.HasValue && next_sort == null)
{
d.sort = prev_sort.Value + 1;
}
db.SaveChanges();
return Json(new { item = new { id = d.id }, result = new { success = true } });
}需要注意的是，当往数据库添加新项时，必须将 sort 值设置为已存在的最大 sort 值 +1 或最小 sort 值 -1。
var d = new dt_dealer
{
name_full = "新建项",
sort = (db.dt_dealer.Max(c => (double?)c.sort) ?? 0) + 1,
};
本教程使用 U 盘 OS X 启动盘和 U 盘 Windows 安装盘，硬盘安装稍有不同。
系统安装前
准备工作
各系统下所有资料备份到移动硬盘或网盘
制作系统盘
如果 OS X 系统已经无法进入，则只能用 Internet Recovery 重装了（联网下载 5G 左右的安装包）。否则可以进入 OS X，从 App Store 下载最新的 OS X 安装包制作 USB 启动盘。
制作 USB OS X 启动盘教程：适用于 Mavericks（10.9） 及更旧版本、适用于 Yosemite（10.10） 及更新版本
使用 OS X 的 Boot Camp 助手制作 U 盘 Windows 安装盘（若使用一般的 Windows 安装盘，安装完成后会遇到无法安装 Boot Camp 的问题，即使是正确的版本）
安装 OS X
版本
本文适用且不限于 OS X 10.8.4 - 10.9.3
分区与安装
插入 USB OS X 启动盘，开机，出现白屏即按住 option / Alt 键，选择相应的启动盘（联网恢复方式：开机按“option”+“command”+“R”，在磁盘工具分区时如果遇到“未能卸载磁盘”，就可以用联网恢复的方式重新分区）
进入磁盘工具，分区：3 个分区：（安装 OS X 的分区必须放在最后）
选中第 3 个分区：Macintosh HD，Mac OS 扩展（日志式），100G，选项：GUID 分区表，用于安装 OS X
选中第 2 个分区：BOOTCAMP，MS-DOS(FAT)，100G，用于安装 Windows
选中第 1 个分区：DATA，ExFAT，用于存放数据（公共盘）
应用，退出磁盘工具，选择重新安装 OS X，选择安装在 Macintosh HD 分区
等待约 30 分钟安装完成
Finder 中推出并拔除 USB OS X 启动盘
安装 Windows
安装
插入 USB Windows 安装盘
在 OS X 中进入：系统偏好设置 - 启动磁盘 - 选择 USB Windows 启动盘 或者 重新启动系统 - 响完“当”且白屏前按住 Option 或 Alt 键，选择 USB 图标的 Windows 项（不是 EFI Boot 那项）
全新安装，选中 BOOTCAMP 分区并格式化，安装。（注：[待测]下次尝试删除全部分区并重新分区，如果能安装并启动成功，就是没有 OS X 的 Windows 单系统了。由于制作 U 盘 OS X 启动盘和 Windows 安装盘都需要在 OS X 环境下进行，所以必须权衡是否真的只需要单系统，否则下次只能用 Internet Recovery 方式重装了）
安装完成后，安装 Boot Camp 支持软件（已集成到 Windows 安装盘内）
必须通过右下角的 Boot Camp 来重启进入 OS X，否则在移除 USB Windows 安装盘的情况下无法进入各系统。（此条为真？待测）
正常弹出并拔除 USB Windows 安装盘
其它
Apple Wireless Keyboard
确保设备管理器的蓝牙设备中有 Apple 字样的驱动名称（即蓝牙驱动是通过 Boot Camp 安装的）
打开键盘电源
右击 Windows 任务栏小图标中的蓝牙图标，添加新设备
配对
许多情况下，asp.net 在 Page_Load 事件中需要动态生成控件，这对于一些新手，包括我在内，会因为回传控件消失，或重复叠加控件等原因搞得头大，经过我翻阅资料和自己的实践，以博客评论页为例，把整个框架写在下面，仅供参考。
<asp:Panel>
<asp:Panel 记录索引 3 >
<asp:Label 昵称 /> <asp:Label 时间 /> <asp:LinkButton 支持按钮_3 /> <asp:LinkButton 删除按钮_3 /> 1楼
</asp:Panel>
<asp:Panel 记录索引 5 >
<asp:Label 昵称 /> <asp:Label 时间 /> <asp:LinkButton 支持按钮_5 /> <asp:LinkButton 删除按钮_5 /> 2楼
</asp:Panel>
</asp:Panel>
记录索引是指数据库中的自动编号。
支持按钮触发事件 LinkButton_support_Click(object sender, EventArgs e)
删除按钮触发事件 LinkButton_del_Click(object sender, EventArgs e)
所有子 Panel 和内部的所有控件都是在 Page_Load 事件中动态创建的，并且不能被嵌套在 if(!IsPostBack)
“点支持累计点击数”和“点删除删除一条记录”都是需要操作数据库的，我以前的做法是操作完数据库后 .Clear() 掉所有控件，再重新生成一次，这样既浪费服务器资源，又容易出现界面上的混乱，譬如显示了两遍该文章的评论。
其实上面代码中 Panel 套 Panel 的好处就是可以根据索引直接删除相应控件，然后直接在页面呈现，而省去上述烦恼。至于累计支持数就更简单了，下面的代码可以轻松解决问题：
string n = ((Label)Panel_commentLists.FindControl("Label_against_" + id)).Text;
n = (Convert.ToInt32(n) + 1).ToString();
((Label)Panel_commentLists.FindControl("Label_against_" + id)).Text = n;
如果有修改和添加评论操作，同样道理，不要重复地全部 .Controls.Add 一次。为了添加时追加一个子 Panel 方便，建议在 Page_Load 的地方传参使用方法来做。
补充：在现在的开发中，我更喜欢用动态生成TableRow,TableCell来操作。