1.demo.html
--------------------------------
<!doctype html>
<!--[if IE 7 ]> <html class="no-js ie ie7 lte7 lte8 lte9" lang="en-US"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie ie8 lte8 lte9" lang="en-US"> <![endif]-->
<!--[if IE 9 ]> <html class="no-js ie ie9 lte9>" lang="en-US"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js" lang="en-US"> <!--<![endif]-->
<head>
<style type="text/css">
.taskdiv{
background-color:rgb(248, 225, 64);
height:50px;
width:50px;
padding:0px;
margin: 2px;
}
.whiteboardtable {
border-collapse: collapse;
border: 1px solid rgb(220, 220, 220);
width: 100%;
}
.whiteboardtable tr td {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #DCDCDC;
border-image: none;
border-right: 1px solid #DCDCDC;
border-style: solid;
border-width: 0 1px 1px 0;
}
.whole_outter_tabletd {
width: 19%;
position: relative;/**重要**/
vertical-align: top;
padding: 1px;
font-size: 12px;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="drag.js"></script>
<script type="text/javascript">
$(function(){
prepareForMove();
//第二列宽度*4
var maxWait = html("whiteboardtable").rows[0].cells[1].offsetWidth*4;
console.log(maxWait);
$('#drag1').dragDrop({fixarea:[0,maxWait,0,0],callback:function(params){
//$('#span1').text('X:'+params.moveX+' Y:'+params.moveY);
console.log(params);//这里可以直接获得移动div的ID
var oddtriger=trigerStatuWindow('wait','odd',params);
console.log(oddtriger);
if(oddtriger=='no'){
//同一状态内的拖动,复原位置
console.log("wait->wait,我要复原");
revertToOri(params.myele.context.id);
}else if(oddtriger=='doing'){
//从wait->doing状态移动,这里可能要与后台交互
//做些你想做的事情,如与后台交互,重新返回数据,重新刷新任务列表等
console.log("从wait->doing状态移动");
}
}});
$('#drag11').dragDrop({fixarea:[0,600,0,0],callback:function(params){
//console.log(params.myele.context.id);这里可以直接获得移动div的ID
}});
$('#drag2').dragDrop({fixarea:[-300,400,0,0],callback:function(params){
//console.log(params.myele.context.id);这里可以直接获得移动div的ID
}});
$('#drag3').dragDrop({fixarea:[0,600,0,0],callback:function(params){
//console.log(params.myele.context.id);这里可以直接获得移动div的ID
}});
$('#drag4').dragDrop({fixarea:[0,600,0,0],callback:function(params){
//console.log(params.myele.context.id);这里可以直接获得移动div的ID
}});
});
function html(id){return document.getElementById(id)}
</script>
</head>
<body>
<table id="whiteboardtable" width="100%" class="whiteboardtable">
<tr><td width="238">需求</td><td width="238">状态1</td><td width="238">状态2</td><td width="238">状态3</td><td width="238">状态4</td></tr>
<tr>
<td id="firsttd1" class="half_outter_tabletd">
<div>需求1</div>
</td>
<td id="179wait_td" class="whole_outter_tabletd">
<table>
<tr>
<td class="whole_outter_tabletd"><div id="drag1" class="taskdiv" οnmοusedοwn="divmoveUp(this.id)">任务1</div></td>
<td class="whole_outter_tabletd"><div id="drag11" class="taskdiv" οnmοusedοwn="divmoveUp(this.id)">任务11</div></td>
</tr>
<tr>
<td class="whole_outter_tabletd"><div id="drag3" class="taskdiv" οnmοusedοwn="divmoveUp(this.id)">任务3</div></td>
<td class="whole_outter_tabletd"><div id="drag4" class="taskdiv" οnmοusedοwn="divmoveUp(this.id)">任务4</div></td>
</tr>
</table>
</td>
<td class="whole_outter_tabletd"> </td>
<td class="whole_outter_tabletd"> </td>
<td class="whole_outter_tabletd"> </td>
</tr>
<tr>
<td><div>需求2</div></td>
<td class="whole_outter_tabletd"></td>
<td class="whole_outter_tabletd"> </td>
<td class="whole_outter_tabletd"><div id="drag2" class="taskdiv" οnmοusedοwn="divmoveUp(this.id)">任务2</div></td>
<td class="whole_outter_tabletd"> </td>
</tr>
</table>
<span id="span1"></span>
</body>
</html>
--------------------------------
2.drag.js
--------------------------------
/**
* 移动的准备工作
*/
function prepareForMove() {
$.extend({
// 获取鼠标当前坐标
mouseCoords : function(ev) {
if (ev.pageX || ev.pageY) {
return {
x : ev.pageX,
y : ev.pageY
};
}
return {
x : ev.clientX + document.body.scrollLeft
- document.body.clientLeft,
y : ev.clientY + document.body.scrollTop
- document.body.clientTop
};
},
// 获取样式值
getStyle : function(obj, styleName) {
return obj.currentStyle ? obj.currentStyle[styleName]
: document.defaultView.getComputedStyle(obj, null)[styleName];
// return obj.currentStyle ? obj.currentStyle[styleName] :
// document.defaultView.getComputedStyle(obj,null).getPropertyValue(styleName);
}
});
// 元素拖拽插件
$.fn.dragDrop = function(options) {
var opts = $.extend({}, $.fn.dragDrop.defaults, options);
return this.each(function() {
// 是否正在拖动
var bDraging = false;
// 移动的元素
var moveEle = $(this);
// 点击哪个元素,以触发移动。
// 该元素需要是被移动元素的子元素(比如标题等)
var focuEle = opts.focuEle ? $(opts.focuEle, moveEle) : moveEle;
if (!focuEle || focuEle.length <= 0) {
alert('focuEle is not found! the element must be a child of '
+ this.id);
return false;
}
// initDiffX|Y : 初始时,鼠标与被移动元素原点的距离
// moveX|Y : 移动时,被移动元素定位位置 (新鼠标位置与initDiffX|Y的差值)
// 如果定义了移动中的回调函数,该对象将以参数传入回调函数。
var dragParams = {
initDiffX : '',
initDiffY : '',
moveX : '',
moveY : '',
myele : ''
};
// 被移动元素,需要设置定位样式,否则拖拽效果将无效。
moveEle.css({
'position' : 'relative',
'left' : '0',
'top' : '0'
});
dragParams.myele = moveEle;
// 点击时,记录鼠标位置
// DOM写法: getElementById('***').οnmοusedοwn= function(event);
var drag = function(e) {
e = e || window.event;
//focuEle.style.cursor = "pointer";
!+"\v1"? document.selection.empty() : window.getSelection().removeAllRanges();
//focuEle.style.left = e.clientX - focuEle.offset_x + "px";
//focuEle.style.top = e.clientY - focuEle.offset_y + "px";
//focuEle.innerHTML = parseInt(focuEle.style.left,10)+ "X"+parseInt(focuEle.style.top,10);
if (bDraging) {
// if(moveEle.get(0).setCapture)
// {
// moveEle.get(0).setCapture();
// }
moveEle.css({
'cursor' : 'move'
});
// 被移动元素的新位置,实际上鼠标当前位置与原位置之差
// 实际上,被移动元素的新位置,也可以直接是鼠标位置,这也能体现拖拽,但是元素的位置就不会精确。
dragParams.moveX = $.mouseCoords(e).x
- dragParams.initDiffX;
dragParams.moveY = $.mouseCoords(e).y
- dragParams.initDiffY;
// 是否限定在某个区域中移动.
// fixarea格式: [x轴最小值,x轴最大值,y轴最小值,y轴最大值]
if (opts.fixarea) {
if (dragParams.moveX < opts.fixarea[0]) {
dragParams.moveX = opts.fixarea[0]
}
if (dragParams.moveX > opts.fixarea[1]) {
dragParams.moveX = opts.fixarea[1]
}
if (dragParams.moveY < opts.fixarea[2]) {
dragParams.moveY = opts.fixarea[2]
}
if (dragParams.moveY > opts.fixarea[3]) {
dragParams.moveY = opts.fixarea[3]
}
}
// 移动方向:可以是不限定、垂直、水平。
if (opts.dragDirection == 'all') {
// DOM写法: document.getElementById('***').style.left =
// '***px';
moveEle.css({
'left' : dragParams.moveX,
'top' : dragParams.moveY
});
} else if (opts.dragDirection == 'vertical') {
moveEle.css({
'top' : dragParams.moveY
});
} else if (opts.dragDirection == 'horizontal') {
moveEle.css({
'left' : dragParams.moveX
});
}
// 如果有回调
// if(opts.callback)
// {
// 将dragParams作为参数传递
// opts.callback.call(a,1);
// }
}
}
var dragend = function(){
document.onmouseup = null;
document.onmousemove = null;
bDraging = false;
moveEle.css({
'cursor' : 'default'
});
// if(moveEle.get(0).releaseCapture && dragParams.moveX!=0)
if (dragParams.moveX != 0) {
if (opts.callback) {
// 将dragParams作为参数传递
opts.callback.call(opts.callback, dragParams);
}
}
if (moveEle.get(0).releaseCapture) {
moveEle.get(0).releaseCapture();
} else {
// window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
}
var dragstart = function(e){
e = e || window.event;
focuEle.offset_x = e.clientX - focuEle.offsetLeft;
focuEle.offset_y = e.clientY - focuEle.offsetTop;
document.onmouseup = dragend;
document.onmousemove = drag;
// 标记开始移动
bDraging = true;
// 改变鼠标形状
moveEle.css({
'cursor' : 'default'
});
// 捕获事件。(该用法,还有个好处,就是防止移动太快导致鼠标跑出被移动元素之外)
if (moveEle.get(0).setCapture) {
moveEle.get(0).setCapture();
} else {
// window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
dragParams.initDiffX = $.mouseCoords(e).x
- moveEle.position().left;
dragParams.initDiffY = $.mouseCoords(e).y
- moveEle.position().top;
return false;
}
//focuEle.onmousedown = dragstart;
focuEle.bind('mousedown',dragstart);
});
};
// 默认配置
$.fn.dragDrop.defaults = {
focuEle : null, // 点击哪个元素开始拖动,可为空。不为空时,需要为被拖动元素的子元素。
callback : null, // 拖动时触发的回调。
dragDirection : 'all', // 拖动方向:['all','vertical','horizontal']
fixarea : null
// 限制在哪个区域拖动,以数组形式提供[minX,maxX,minY,maxY]
};
}
/**
* 通过移动的位置和移动的statu块,计算移动到的位置返回 wait,doing,done,closed location : odd 奇数 even 偶数
*/
function trigerStatuWindow(statu, location, params) {
var tablewidth = parseInt(parseInt(window.innerWidth
|| document.documentElement.clientWidth) - 79)*0.95;
var waitTdWidth = tablewidth * 0.2;
switch (statu) {
case "wait":
if (location == 'odd') {
if (0 <= params.moveX && params.moveX < 3 / 4 * waitTdWidth) {
return 'no';
} else if (3 / 4 * waitTdWidth <= params.moveX
&& params.moveX < 7 / 4 * waitTdWidth) {
return 'doing';
} else if (7 / 4 * waitTdWidth <= params.moveX
&& params.moveX < 11 / 4 * waitTdWidth) {
return 'done';
} else if (11 / 4 * waitTdWidth <= params.moveX
&& params.moveX < 15 / 4 * waitTdWidth) {
return 'test';
} else if (15 / 4 * waitTdWidth <= params.moveX) {
return 'closed';
} else {
return 'no';
}
} else {
if (0 <= params.moveX && params.moveX < 1 / 4 * waitTdWidth) {
return 'no';
} else if (1 / 4 * waitTdWidth < params.moveX
&& params.moveX < 5 / 4 * waitTdWidth) {
return 'doing';
} else if (5 / 4 * waitTdWidth <= params.moveX
&& params.moveX < 9 / 4 * waitTdWidth) {
return 'done';
} else if (9 / 4 * waitTdWidth <= params.moveX
&& params.moveX < 13 / 4 * waitTdWidth) {
return 'test';
} else if (13 / 4 * waitTdWidth <= params.moveX) {
return 'closed';
} else {
return 'no';
}
}
case "doing":
if (location == 'odd') {
if (-1 / 4 * waitTdWidth >= params.moveX) {
return 'wait';
} else if (-1 / 4 * waitTdWidth < params.moveX
&& params.moveX < 3 / 4 * waitTdWidth) {
return 'no';
} else if (3 / 4 * waitTdWidth <= params.moveX
&& params.moveX < 7 / 4 * waitTdWidth) {
return 'done';
} else if (7 / 4 * waitTdWidth <= params.moveX
&& params.moveX < 11 / 4 * waitTdWidth) {
return 'test';
} else if (11 / 4 * waitTdWidth <= params.moveX) {
return 'closed';
} else {
return 'no';
}
} else {
if (-3 / 4 * waitTdWidth >= params.moveX) {
return 'wait';
} else if (-3 / 4 * waitTdWidth < params.moveX
&& params.moveX < 1 / 4 * waitTdWidth) {
return 'no';
} else if (1 / 4 * waitTdWidth < params.moveX
&& params.moveX < 5 / 4 * waitTdWidth) {
return 'done';
} else if (5 / 4 * waitTdWidth < params.moveX
&& params.moveX < 9 / 4 * waitTdWidth) {
return 'test';
} else if (9 / 4 * waitTdWidth <= params.moveX) {
return 'closed';
} else {
return 'no';
}
}
break;
case "done":
if (location == 'odd') {
if (-5 / 4 * waitTdWidth >= params.moveX) {
return 'wait';
} else if (-5 / 4 * waitTdWidth < params.moveX
&& params.moveX <= -1 / 4 * waitTdWidth) {
return 'doing';
} else if (-1 / 4 * waitTdWidth < params.moveX
&& params.moveX < 3 / 4 * waitTdWidth) {
return 'no';
} else if (3 / 4 * waitTdWidth <= params.moveX
&& params.moveX < 7 / 4 * waitTdWidth) {
return 'test';
} else if (7 / 4 * waitTdWidth <= params.moveX) {
return 'closed';
} else {
return 'no';
}
} else {
if (-7 / 4 * waitTdWidth >= params.moveX) {
return 'wait';
} else if (-7 / 4 * waitTdWidth < params.moveX
&& params.moveX < -3 / 4 * waitTdWidth) {
return 'doing';
} else if (-3 / 4 * waitTdWidth < params.moveX
&& params.moveX < 1 / 4 * waitTdWidth) {
return 'no';
} else if (1 / 4 * waitTdWidth <= params.moveX
&& params.moveX < 5 / 4 * waitTdWidth) {
return 'test';
} else if (5 / 4 * waitTdWidth <= params.moveX) {
return 'closed';
} else {
return 'no';
}
}
break;
case "test":
if (location == 'odd') {
if (-9 / 4 * waitTdWidth >= params.moveX) {
return 'wait';
} else if (-9 / 4 * waitTdWidth < params.moveX
&& params.moveX <= -5 / 4 * waitTdWidth) {
return 'doing';
} else if (-5 / 4 * waitTdWidth < params.moveX
&& params.moveX <= -1 / 4 * waitTdWidth) {
return 'done';
}else if (-1 / 4 * waitTdWidth < params.moveX
&& params.moveX < 3 / 4 * waitTdWidth) {
return 'no';
} else if (3 / 4 * waitTdWidth <= params.moveX) {
return 'closed';
} else {
return 'no';
}
} else {
if (-11 / 4 * waitTdWidth >= params.moveX) {
return 'wait';
} else if (-11 / 4 * waitTdWidth < params.moveX
&& params.moveX <= -7 / 4 * waitTdWidth) {
return 'doing';
} else if (-7 / 4 * waitTdWidth < params.moveX
&& params.moveX <= -3 / 4 * waitTdWidth) {
return 'done';
}else if (-3 / 4 * waitTdWidth < params.moveX
&& params.moveX < 1 / 4 * waitTdWidth) {
return 'no';
} else if (1 / 4 * waitTdWidth <= params.moveX) {
return 'closed';
} else {
return 'no';
}
}
break;
case "closed":
if (-1 / 4 * waitTdWidth < params.moveX) {
return 'no';
} else if (-5 / 4 * waitTdWidth < params.moveX
&& params.moveX < -1 / 4 * waitTdWidth) {
return 'test';
} else if (-9 / 4 * waitTdWidth < params.moveX
&& params.moveX < -5 / 4 * waitTdWidth) {
return 'done';
} else if (-13 / 4 * waitTdWidth < params.moveX
&& params.moveX < -9 / 4 * waitTdWidth) {
return 'doing';
} else if (-13 / 4 * waitTdWidth >= params.moveX) {
return 'wait';
} else {
return 'no';
}
break;
}
}
/**
* div复位
*/
function revertToOri(elemId) {
html(elemId).style.left = 0 + 'px';
html(elemId).style.zIndex = 0;
}
/**
* div置上
*/
function divmoveUp(id)
{
var box = document.getElementById(id);
box.style.zIndex=1;
}
-------------------------------