<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/jquery.easyui.min.js"></script>
<style type="text/css">
.table-b table td
{
border:1px solid black;
font-size:11pt
}
.back_active{border:1px solid black;}
</style>
<script>
$(function () {
$('#cartcontent').datagrid({
singleSelect: true
});
$('.item').draggable({
revert: true,
proxy: 'clone',
onStartDrag: function () {
$(this).draggable('options').cursor = 'not-allowed';
$(this).draggable('proxy').css('z-index', 10);
$("#hiddenBackColor").val($(this).css("background-color"));
},
onStopDrag: function () {
$(this).draggable('options').cursor = 'move';
}
});
$('.cart').droppable({
onDragEnter: function (e, source) {
$(source).draggable('options').cursor = 'auto';
},
onDragLeave: function (e, source) {
$(source).draggable('options').cursor = 'not-allowed';
},
onDrop: function (e, source) {
var name = $(source).find('span:eq(0)').html();
//获取当前移到的目的div的id.
var targetName = $(this).attr("id");
//获取当前div行中div资源数个数，用于编号给id，编号给id则后面用于删除
var length = $(this).children('div').length;
var targetName = targetName + length.toString();
//获取背景色，保持与拖拽目标一致
//var backColor = getBackgroundColor();
//去重复
var targetDiv = $(this).html();
if (targetDiv.indexOf(name) >= 0) {
alert("不可重复添加时段");
return false;
}
//追加div,name为了后面排序用
var data = "<Div class='show' name='" + name + "' id='div" + targetName + "' style='border-radius:5px;width:80px;text-align:center;float:left' onclick='clickDingdan(this)'>" + name + "</Div>";
$(this).append(data);
//添加颜色与拖拽目标一致
$("div#div" + targetName).css("background-color", $("#hiddenBackColor").val());
//按时间排序
var asc = function (a, b) {
return parseInt($(a).attr("name").split("<br>")[1].replace(":", "")) - parseInt($(b).attr("name").split("<br>")[1].replace(":", ""))
};
var _this = $(this);
var sortByInput = function (sortBy) {
var sortEle = _this.children("div").sort(sortBy);
_this.append(sortEle);
}
sortByInput(asc);
}
});
});
//单击选择订单div
function clickDingdan(obj)
{
//获取选中ID
$("#hiddenClickId").val($(obj).attr("id"));
//加式样
if ($(obj).hasClass("bank_active")) return;
$(".show").removeClass("back_active");
$(obj).addClass("back_active");
}
//删除事件
function removeDingdan() {
var DingdanId = $("#hiddenClickId").val();
$("div#" + DingdanId).remove();
}
//弃用，颜色转换方案，使用jquery
function getBackgroundColor() {
var rgb = $("#hiddenBackColor").val();
if (rgb >= 0) return rgb; //如果是一个hex值则直接返回
else {
rgb = rgb.match(/^rgb(\d+),\s∗(\d+),\s∗(\d+)$/);
function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); }
rgb = "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
return rgb;
}
//删除时判断选中的div是第几个，如果不是最后一个，则删除第一第二个元素，如果最后一个，则删除倒数第一，第二个元素
</script>
</head>
<body>
<div class="table-b">
<table border="0" cellspacing="0" cellpadding="0" style="width:160px">
<thead>
<tr>
<td>运单一览</td>
</tr>
<tr>
<td style="height:55px">
<div>
<div style="float:left; width:70px" >
<label style='float:left;background-color:red; width:18px; height:15px;margin-right:5px'> </label><div>未配车</div>
</div>
<div>
<label style='float:left;background-color:#CCCC00; width:18px; height:15px;margin-right:5px'> </label><div>配车完了</div>
</div>
<div style="float:left; width:70px" >
<label style='float:left;background-color:Yellow; width:18px; height:15px;margin-right:5px'> </label><div>集荷中</div>
</div>
<div>
<label style='float:left;background-color:Green; width:18px; height:15px;margin-right:5px'> </label><div>配送中</div>
</div>
<div style="float:left; width:90px" >
<label style='float:left;background-color:Gray; width:18px; height:15px;margin-right:5px'> </label><div>配送完了</div>
</div>
</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="item" style="background-color:Red"><span>南京<br/>12:00</span></div>
</td>
</tr>
<tr>
<td>
<div class="item" style="background-color:Red"><span>南京<br/>13:00</span></div>
</td>
</tr>
<tr>
<td>
<div class="item" style="background-color:Red"><span>北京<br/>12:00</span></div>
</td>
</tr>
<tr>
<td>
<div class="item" style="background-color:Green"><span>广州<br/>12:00</span></div>
</td>
</tr>
<tr>
<td>
<div class="item" style="background-color:Green"><span>北京<br/>11:00</span></div>
</td>
</tr>
<tr>
<td>
<div class="item" style="background-color:Yellow"><span>上海<br/>12:00</span></div>
</td>
</tr>
<tr>
<td>
<div class="item" style="background-color:Yellow"><span>深圳<br/>12:00</span></div>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<h1>选择的订单</h1>
<div style="background:#fff" id="1">
<button onclick="removeDingdan()">删除订单</button>
<table id="cartcontent" fitColumns="true" style="width:800px;height:auto;">
<thead>
<tr>
<th field="name" width=140>流程</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="cart" id="nanjing" style="width:100%; white-space:nowrap;display:inline-block"> </div>
</td>
</tr>
<tr>
<td>
<div class="cart" id="beijing" style="width:100%; white-space:nowrap;display:inline-block"> </div>
</td>
</tr>
<tr>
<td>
<div class="cart" id="guangzhou" style="width:100%; white-space:nowrap;display:inline-block"> </div>
</td>
</tr>
<tr>
<td>
<div class="cart" id="shanghai" style="width:100%; white-space:nowrap;display:inline-block"> </div>
</td>
</tr>
<tr>
<td>
<div class="cart" id="shenzhen" style="width:100%; white-space:nowrap;display:inline-block"> </div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<input id="hiddenClickId" name="hiddenClickId" type="hidden" />
<input id="hiddenBackColor" name="hiddenBackColor" type="hidden" />
</body>
</html>
