<div class="tr-right draggable ui-widget-content"><div class="dragItem" style="left: 0px;"><div class="dragBox">任务三<div class="rightLine"></div></div></div><div class="dragItem" style="left: 100px;"><div class="dragBox">任务四<div class="rightLine"></div></div></div><div class="dragItem" style="left: 200px;"><div class="dragBox">任务五<div class="rightLine"></div></div></div><div class="dragItem" id="ddd" style="left: 300px;"><div class="dragBox">任务六<div class="rightLine"></div></div></div>
</div>

$(".dragItem").draggable({containment: "parent",axis: "x",cursor: "move",start: function(data,data1) {//元素拖拽开始
　　},drag: function(data,data1) {//元素拖拽中
　　},stop: function(data,data1) {//元素拖拽结束
　　}
});

function situation(a,b){　　　var aLeft = a.position().left;   　　//a元素的left值var aRight = aLeft + a.outerWidth();　　//a元素right。。。var bLeft = b.position().left;var bRight = bLeft + b.outerWidth();//a元素中心距离b元素中心的距离        var l_r = ((bRight+bLeft)-(aRight+aLeft))/2;if(aLeft>=bLeft&&aRight<=bRight){//a被b包含return [0,l_r];}if(bLeft>=aLeft&&bRight<=aRight){//a包含了breturn [1,l_r];}if(((bLeft>=aLeft&&bLeft<aRight)&&(bRight>aRight))||((aRight>bLeft&&aRight<=bRight)&&(aLeft<bLeft))){//a的右边和b有重叠return [2,l_r];}if(((bRight>aLeft&&bRight<=aRight)&&(bLeft<aLeft))||((aLeft>=bLeft&&aLeft<bRight)&&(aRight>bRight))){//a的左边和b有重叠return [3,l_r];}//a和b没有任何重叠return [4,l_r];
}　//此方法分别输入a，b元素的left，right值，结果返回true代表a，b有重合部分，返回false代表啊，b辆元素不重合。

　　function checkPoint(a, b, c, d) {　　

　　　　//a代表a元素的left值，b代表a元素的right值，c代表b元素的left值，d代表b元素的right值。

　　　　return(a >= c && b <= d) ||

　　　　(c >= a && d <= b) ||
　　　　(((c >= a && c < b) && (d > b)) || ((b > c && b <= d) && (a < c))) ||
　　　　(((d > a && d <= b) && (c < a)) || ((a >= c && a < d) && (b > d)));
　　}

//拖拽
$(".dragItem").draggable({containment: "parent",axis: "x",cursor: "move",stop: function(data, data1) {//拖拽任务对象var zj = data1.helper;//获取与自己中心最近的接触对象var mostTouchDom = getMostTouchDom(zj);if(mostTouchDom != false) { //释放后是会和其他元素产生堆叠if(mostTouchDom.touchRange >= 0) {　　　　　　　　　 //如果touchRange>0,自己中心在接触元素中心的左边if(!eachItemsLR(0, zj[0], mostTouchDom.dom, 0, ($(mostTouchDom.dom).position().left - zj.outerWidth()))) {　　　　　　　　　　　　//如果吸附以后，不会再与其他元素产生重叠，此时执行吸附操作：zj.css('left', ($(mostTouchDom.dom).position().left - zj.outerWidth()));} else {　　　　　　　　　　　　//吸附后会与其他元素产生堆叠，重置自己到拖拽前的初始状态zj.css('left', data1.originalPosition.left);}} else {　　　　　　　　　 //如果touchRange<0,自己的中心在接触元素中心的右边if(!eachItemsLR(0, zj[0], mostTouchDom.dom, 1, ($(mostTouchDom.dom).position().left +$(mostTouchDom.dom).outerWidth() + zj.outerWidth()), zj.parent())) {　　　　　　　　　　　　//同上个对称的ifzj.css('left', ($(mostTouchDom.dom).position().left + $(mostTouchDom.dom).outerWidth()));} else {　　　　　　　　　　　　//同上个对称elsezj.css('left', data1.originalPosition.left);}}}}
});          

//判断是否有兄弟元素与自己产生堆叠，如果有返回此兄弟元素，如果没有返回false;
function getMostTouchDom(zj) {var choseList = [];zj.parent().find('.dragItem').each(function() {if(zj[0] != this) {var result = situation(zj, $(this));if(result[0] < 4 && result[0] >= 0) {choseList.push({touchAbs: Math.abs(result[1]),　　//与重叠元素中心点的距离的绝对值dom: this,　　　　　　　　　　　　　　//此重叠元素对象touchRange: result[1]　　　　　　　 //与重叠元素中心点距离});}}});if(choseList.length == 0) {return false;}　　 //数组以绝对值大小降序排列choseList.sort(function(a, b) {return a.touchAbs - b.touchAbs;});　　//返回与zj中心点距离最近的元素return choseList[0];
}/* *     //遍历检查：除了自身身和接触对象外，是否有其他元素会在吸附后产生重叠。

 * type:0:为拖拽,1:为拉伸（拉伸稍后会介绍）* item:自身元素对象.* target:当前与自身元素接触目标元素对象.* lr:值为0:自身吸附在目标元素的左侧. 值为1:自身吸附在目标元素的右侧.* can:代表在假设吸附状态形成后,自身元素的left值.(左吸附)。自身元素的right值.(右吸附)。* box:当前任务的父元素(任务容器对象)。*/
function eachItemsLR(type, item, target, lr, can, box) {var bool = false;var boxRight = (typeof(box) == "undefined") ? false : box.width();$(item).parent().find('.dragItem').each(function() {if(item != this && target != this) {if(lr == 0) {//将要左吸附，对假设已完成左吸附的元素做容器类的重叠检测　　　　　　　　　　　　//type==0时为拖拽功能逻辑：checkPoint()第一个参数为  被吸附元素的left - 自身的宽度 　　　　　　　　　　　　//type==1是为拉伸功能逻辑：checkPoint()第一个参数为  自身元素的leftbool = checkPoint(type ? ($(item).position().left) : ($(target).position().left - $(item).outerWidth()),($(target).position().left),$(this).position().left,($(this).position().left + $(this).outerWidth()));if(bool) {return false;}} else {//将要右吸附，对假设已完成右吸附的元素做容器类的重叠检测bool = checkPoint(($(target).position().left + $(target).outerWidth()),($(target).position().left + $(target).outerWidth() + $(item).outerWidth()),($(this).position().left),($(this).position().left + $(this).outerWidth()));if(bool) {return false;}}if(bool) {return false;}}});//如果为true则需要重置return bool || (can < 0) || (boxRight === false ? false : (can > box.width()));
}

//拉伸
$(".rightLine").draggable({axis: "x",　cursor: "e-resize",　　//鼠标hover样式为拉伸drag: function(data, data1) {data1.helper.parent().parent().outerWidth(data1.position.left + 5);},stop: function(data, data1) {//拉伸任务对象var zj = data1.helper.parent().parent();if(data1.position.left < 0) {//游标left超出拖拽对象左侧(left<=)时重置游标left为0zj.outerWidth(5);data1.helper.css('left', 0);return;}var mostTouchDom = getMostTouchDom(zj);if(mostTouchDom != false) {var thisLeft = $(mostTouchDom.dom).position().left;var zjWidth = zj.outerWidth();var thisWidth = $(mostTouchDom.dom).outerWidth();if(mostTouchDom.touchRange >= 0) {if(!eachItemsLR(1, zj[0], mostTouchDom.dom, 0, ((thisLeft - zjWidth) < 0 ? 0 : (thisLeft - zjWidth)))) {zj.width($(mostTouchDom.dom).position().left - zj.position().left);data1.helper.css('left', ($(mostTouchDom.dom).position().left - zj.position().left - 5));} else {zj.outerWidth(data1.originalPosition.left + 5);data1.helper.css('left', data1.originalPosition.left);}} else {if(!eachItemsLR(1, zj[0], mostTouchDom.dom, 1, (thisLeft + zjWidth + thisWidth), zj.parent())) {zj.css('left', ($(mostTouchDom.dom).position().left + $(mostTouchDom.dom).outerWidth()));} else {zj.outerWidth(data1.originalPosition.left + 5);data1.helper.css('left', data1.originalPosition.left);}}}}
});