div上下箭头和拖动排序 sortable

div上下箭头和拖动排序

官网地址  http://www.sortablejs.com/

<div id="dep-pus">
<div class="process-sheets gbinl-list" id="sortable">
@{
var pusFlightList = new List<TOMSFlightInfoShare>();
if (!GlobalInstance.IsSeatOpenOfT2 && GlobalInstance.IsMergeSeat && GlobalInstance.MergeForSeat.Contains("T2,T1"))
{
pusFlightList = GlobalInstance.TOMSFlightInfoShares.Where(m => (m.DepAddr.Equals(GlobalInstance.Region) || (string.IsNullOrEmpty(m.DepAddr.Trim()) && string.IsNullOrEmpty(m.ArrAddr.Trim()))) && !string.IsNullOrEmpty(m.Owner) && m.Owner == "GA" && !string.IsNullOrEmpty(m.StripState) && (m.StripState.Equals("PUS") || m.StripState.Equals("P_S") || m.StripState.Equals("STR")) && (m.HandInFlag == 4 || m.HandInFlag == 0 || m.HandInFlag == 2)).ToList();
}
else
{
pusFlightList = GlobalInstance.TOMSFlightInfoShares.Where(m => (m.DepAddr.Equals(GlobalInstance.Region) || (string.IsNullOrEmpty(m.DepAddr.Trim()) && string.IsNullOrEmpty(m.ArrAddr.Trim()))) && !string.IsNullOrEmpty(m.Owner) && m.Owner == "GA" && !string.IsNullOrEmpty(m.StripState) && (m.StripState.Equals("PUS") || m.StripState.Equals("P_S") || m.StripState.Equals("STR")) && (m.HandInFlag == 4 || m.HandInFlag == 0 || m.HandInFlag == 2) && ((!string.IsNullOrEmpty(m.PosName) && m.PosName == "T2"))).ToList();
}
var depColor1 = GlobalInstance.colorManaList.Where(n => n.AlarmCode.Contains("DepBackColor")).FirstOrDefault();//离港背景色
var depColor31 = GlobalInstance.colorManaList.Where(n => n.AlarmCode.Contains("DragPlaneBackColor")).FirstOrDefault();
var trainColor31 = GlobalInstance.colorManaList.Where(n => n.AlarmCode.Contains("TrainFlightBackColor")).FirstOrDefault();
var p = 0;

foreach (var item in pusFlightList)
{
p++;
var colorTable1 = "";
if (item.DepAddr == GlobalInstance.Region)
{
colorTable1 = depColor1.AlarmColor;
}
if (item.PlaneDragFlag)
{
colorTable1 = depColor31.AlarmColor;
}
if (item.DepAddr == GlobalInstance.Region && item.ArrAddr == GlobalInstance.Region)
{
colorTable1 = trainColor31.AlarmColor;
}
<div class="process-sheet brief-process-sheet" data-calsign="@item.Calsign" data-flightid="@item.FlightID" onclick="SelectChange(this)" ondblclick="ExtendDbl('dep-pus',this)" data-baseType="GA_DEP_NPU" data-button="TAX,BAK">
<table border="1" style="background-color:@colorTable1 !important">
<tbody>
<tr>
<td colspan="2" class="data-index" title="序号" style="background-color:@item.MarkBgColor">@p</td>
<td colspan="3" title="任务性质">@item.FlyType</td>
<td class="p-casign" colspan="8" title="航班号">@item.Calsign </td>
<td colspan="3" class="tranf-state" title="进程状态" onclick="stateMenu('TAX,BAK',this)">@item.StripState</td>
<td colspan="3" class="p-stand" title="停机位" onclick="closeUpStandWindow()" ondblclick="openUpStandWindow(@item.FlightID,@item.Stand)">@item.Stand </td>
@if (item.CTOT != null)
{
<td colspan="4" class="p-ttot" style="background-color:@depColor53" title="CTOT目标起飞时间"> @(item.CTOT.Value.ToString("HHmm") )</td>
}
else
{
<td colspan="4" class="p-ttot" onclick="ApplyTTOT(@item.FlightID,'@item.Calsign','@(item.ETD == null ? " " : @item.ETD.Value.ToString(" yyyy-MM-dd HH:mm"))',this)" title="TTOT:目标起飞时间"> @(item.TTOT == null ? "" : @item.TTOT.Value.ToString("HHmm"))</td>
}
<td colspan="8" data-calsign="@item.Calsign" title="滑行路线" data-flightid="@item.FlightID" data-dep="2" class="taxiwaymodify" ondblclick="SlectTaxiWay(this)">@(item.Taxiway == null ? "" : @item.Taxiway)</td>
@if (item.HoldPoint == null || item.HoldPoint == "")
{
<td colspan="3" class="p-hold" title="等待点"></td>
}
else
{
<td colspan="3" class="p-hold" style="background-color: rgb(255, 255, 0)" title="等待点">@item.HoldPoint</td>
}
@if (!string.IsNullOrEmpty(item.AcfType) && (item.AcfType == "B739" || item.AcfType == "A321" || item.AcfType.Contains("A320NEW")))
{
<td colspan="3" style="" title="机型"><div style="margin-top: -20px;font-size: 10px;border-bottom:1px solid #421a1a;background-color:#980ed2;">@item.AcfType</div><div class="p-model" style="height: 25px;margin-bottom: -20px;" ondblclick="openClearWindow(@item.FlightID,'ga-dep-tax',this)"></div></td>
}
else if (item.WTC == "H" || (!string.IsNullOrEmpty(item.AcfType) && item.AcfType.Contains("B75")))
{
<td colspan="3" style="" title="机型"><div style="margin-top: -20px;font-size: 10px;border-bottom:1px solid #421a1a;background-color:rgb(255,69,0);">@item.AcfType</div><div class="p-model" style="height: 25px;margin-bottom: -20px;" ondblclick="openClearWindow(@item.FlightID,'ga-dep-tax',this)"></div> </td>
}
else
{
<td colspan="3" title="机型"><div style="margin-top: -20px;font-size: 10px;border-bottom:1px solid #421a1a;">@item.AcfType</div><div class="p-model" style="height: 25px;margin-bottom: -20px;" ondblclick="openClearWindow(@item.FlightID,'ga-dep-tax',this)"></div> </td>
}
@{
if (item.SID != null)
{
if (item.SID.Contains("P320"))
{
<td class="p-deptype" colspan="5" style="color:blue" title="离场方式"> @(item.SID == null ? "" : @item.SID)</td>
}
else if (item.SID.Contains("KMD") && item.FplRoute.Contains("FYG"))
{
<td class="p-deptype" colspan="5" style="color:#7700BB;background-color:#ecbab1" title="离场方式"> @(item.SID == null ? "" : @item.SID)</td>
}
else if (item.SID.Contains("KMD") && !item.FplRoute.Contains("FYG"))
{
<td class="p-deptype" colspan="5" style="color:#7700BB;background-color:#8c8ae8" title="离场方式"> @(item.SID == null ? "" : @item.SID)</td>
}
else if (item.SID.Contains("TMX"))
{
<td class="p-deptype" colspan="5" style="color:#00DDDD" title="离场方式"> @(item.SID == null ? "" : @item.SID)</td>
}
else if (item.SID.Contains("WXI"))
{
<td class="p-deptype" colspan="5" style="color:#8b0000;" title="离场方式"> @(item.SID == null ? "" : @item.SID)</td>
}
else if (item.SID.Contains("DUD"))
{
<td class="p-deptype" colspan="5" style="color:rgb(126, 2, 126);background-color:rgb(148, 114, 215)" title="离场方式"> @(item.SID == null ? "" : @item.SID)</td>
}
else if (item.SID.Contains("RUM"))
{
<td class="p-deptype" colspan="5" style="color:rgb(128, 0, 128);background-color:rgb(255, 105, 180)" title="离场方式"> @(item.SID == null ? "" : @item.SID)</td>
}
else if (item.SID.Contains("IGP"))
{
<td class="p-deptype" colspan="5" style="color:rgb(255, 0, 0);" title="离场方式"> @(item.SID == null ? "" : @item.SID)</td>
}
else
{
<td class="p-deptype" colspan="5" title="离场方式"> @(item.SID == null ? "" : @item.SID)</td>
}
}
else
{
<td class="p-deptype" colspan="5" title="离场方式"> @(item.SID == null ? "" : @item.SID)</td>
}
}
<td colspan="3" class="p-WTOT" title="预警保障时间" onclick="popupWtot( @item.FlightID ,'dep-pus',this)">@(item.WTOT == null ? "" : (item.WTOT.Length > 6 ? (Convert.ToDateTime(item.WTOT)).ToString("HHmm") : item.WTOT)) </td>
<td colspan="3" class="p-handOut" title="移交点">@(item.HandOutPoint == null ? "" : @item.HandOutPoint)</td>
<td colspan="3" title="移交">TAX <br />--></td>
</tr>
</tbody>
</table>
@if (item.IsConstraint)
{
<div class="n-constraint" style="border-top: 10px solid @constraint;border-left: 10px solid @constraint;"></div>
}
</div>
}
}
</div>
</div>

//**************-li拖拽排序，添加监视-**********//
$("#sortable").sortable({
containment: '#dep-pus',
axis: "y",
scroll: true
});
$("#sortable").disableSelection();
obox = document.querySelector('#sortable');
obox.addEventListener("mousedown", function (eve) {
var el = eve || window.event;
var x = eve.clientX - obox.offsetLeft;
var y = eve.clientY - obox.offsetTop;
document.addEventListener("mousemove", move);
function move(eve) {
var xx = eve.clientX - x;
var yy = eve.clientY - y;
if (xx <= 0) { xx = 0; }
if (xx >= $(this).offsetWidth - obox.offsetWidth) {
xx = $(this).offsetWidth - obox.offsetWidth;
}
if (yy <= 0) { yy = 0; }
if (yy >= $(this).offsetHeight - obox.offsetHeight) {
yy = $(this).offsetHeight - obox.offsetHeight;
}
obox.style.left = xx + 'px';
obox.style.top = yy + 'px';
}
document.addEventListener("mouseup", up);
function up() {
var ary = $('#dep-pus .process-sheets .process-sheet');
var index = 0;
for (var l = 0; l < ary.length; l++) {
index++;
$(ary[l]).find('.data-index').text(index);
}
document.removeEventListener("mousemove", move);
document.removeEventListener("mouseup", up);
// alert("up");
}
});
//**************-上下箭头按钮排序-*********//
function GAUp(windowId) {
//上移
var flid = $(extandObj).attr('data-flightid');
var index = $(extandObj).find('.data-index').text();//序号

var ary = $('#' + windowId + ' .process-sheets .process-sheet');
if (index == "") {
for (var l = 0; l < ary.length; l++) {
if (flid == ary[l].dataset.flightid) {
index = l + 1;
}
}
}
if (index == 1) {
return;
}

var tempobj1 = $("<div></div>");//临时对象，标记位置
var tempobj2 = $("<div></div>");
tempobj1.insertBefore(ary[index - 2]);//要上移的1--要交换位置的两个对象前分别都插入一个临时对象
tempobj2.insertBefore(ary[index - 1]);//2
$(ary[index - 2]).insertAfter(tempobj2);//将第一个要移动的对象插入临时对象2后面，相当于覆盖第二个要移动对象的位置
$(ary[index - 1]).insertAfter(tempobj1);
tempobj1.remove();//删除临时对象
tempobj2.remove();
$(ary[index - 2]).find('.data-index').text(index);//改变序号
$(ary[index - 1]).find('.data-index').text(index - 1);
}
function GADown(windowId) {
//下移
var flid = $(extandObj).attr('data-flightid');
var index = $(extandObj).find('.data-index').text();//序号
var ary = $('#' + windowId + ' .process-sheets .process-sheet');
if (index == "") {//handin单独判断序号
for (var l = 0; l < ary.length; l++) {
if (flid == ary[l].dataset.flightid) {
index = l + 1;
}
}
}
if (index == ary.length) {
return;
}
var tempobj1 = $("<div></div>");//临时对象，标记位置
var tempobj2 = $("<div></div>");
tempobj1.insertBefore(ary[index - 1]);//要下移的1--要交换位置的两个对象前分别都插入一个临时对象
tempobj2.insertBefore(ary[index]);//2
$(ary[index - 1]).insertAfter(tempobj2);//将第一个要移动的对象插入临时对象2后面，相当于覆盖第二个要移动对象的位置
$(ary[index]).insertAfter(tempobj1);
tempobj1.remove();//删除临时对象
tempobj2.remove();
$(ary[index]).find('.data-index').text(index);//改变序号
$(ary[index - 1]).find('.data-index').text(index - 1 + 2);
}