流程图效果 - 爱码网

<!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) {
//$(this).remove(".span");
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>";
/*var data;
if (length == 0) {
data = "<Div class=\'show\' name=\'" + name + "\' id=\'div" + targetName + "\' style=\'border-radius:5px;width:80px;text-align:center\' onclick=\'clickDingdan(this)\'>" + name + "<div>";
}
else {
data = "<Div class=\'show\' name=\'" + name + "\' id=\'div" + targetName + "\' style=\'border-radius:5px;width:80px;text-align:center\' 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#divnanjing0").after("<span class=\'span1\'>a</span>");
}
});
});

//单击选择订单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>
<h1>选择的订单</h1>
<div style="background:#fff; float:left" id="1">
<button onclick="removeDingdan()">删除订单</button>
<table id="cartcontent" fitColumns="true" style="width:600px;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>
<tr>
<td>
<div class="cart" id="tianjing" style="width:100%; white-space:nowrap;display:inline-block"> </div>
</td>
</tr>
<tr>
<td>
<div class="cart" id="kunming" style="width:100%; white-space:nowrap;display:inline-block"> </div>
</td>
</tr>
<tr>
<td>
<div class="cart" id="qingdao" style="width:100%; white-space:nowrap;display:inline-block"> </div>
</td>
</tr>
<tr>
<td>
<div class="cart" id="dalian" style="width:100%; white-space:nowrap;display:inline-block"> </div>
</td>
</tr>
<tr>
<td>
<div class="cart" id="yili" style="width:100%; white-space:nowrap;display:inline-block"> </div>
</td>
</tr>
<tr>
<td>
<div class="cart" id="wulumuqi" style="width:100%; white-space:nowrap;display:inline-block"> </div>
</td>
</tr>
<tr>
<td>
<div class="cart" id="yinchuan" style="width:100%; white-space:nowrap;display:inline-block"> </div>
</td>
</tr>
</tbody>
</table>
</div>

<div class="table-b" style=" padding-top:21px">
<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>
<input id="hiddenClickId" name="hiddenClickId" type="hidden" />
<input id="hiddenBackColor" name="hiddenBackColor" type="hidden" />
</body>
</html>