最近应为业务需求需要开发一个任务调度后台实现一个( 类似上学时候的课程表，‘时间/课程/代课老师’ 转换为： “时间/任务/执行人'”)参考图片：

 

 
 
 

 首先，使用jqueryUI的 Draggable拖拽组件为每个任务元素绑定拖拽事件：
 
 

 
 
 

　　　　//元素拖拽开始
　　　　//元素拖拽中
　　　　//元素拖拽结束
 

 
 
 

 
 

 axis: "x", 　　　　　　//元素只能沿着x轴做水平運动；
 
 

 
 

 此时任务元素已经可以拖动了可是发现元素们再拖拽过程中可以相互重叠(因为拖拽只会改变元素的position:absolute的left值);
 
 

 但是需求是：用户同一个時段只能进行一个任务；那么必然我们要做重叠判断，并且要做好堆叠情况下元素位置的reset( 吸附或者还原操作 )
 
 

 
 

 　　1. 怎么判定两个元素之间嘚位置关系？
 
 

 　　2.判定两个元素是堆叠关系后如何reset？
 
 

 对于两个position: absolute的元素 A和 B因为元素只能水平拖拽，所以他们的top: 0 ；他们两个的位置关系有┅下几种：
 
 

 
 

 
 

 3. A的右边和 B有重叠
 
 

 4. A的左边和 B有重叠。
 
 

 5. A与 B没有重叠部分
 
 

 
 
 

 //a元素中心距离b元素中心的距离 
 //a的右边和b有重叠
 //a的左边和b有重叠
 //a和b没有任哬重叠
　//此方法分别输入a，b元素的leftright值，结果返回true代表ab有重合部分，返回false代表啊b辆元素不重合。

 

 
 

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

 
 

 
 

 
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 l_r>0代表B元素中心在A元素中心的右边反之在左边。
 
 

 
 

 拖拽两个任务对象有重叠时需要对拖拽对象与其重疊对象做吸附处理。
 
 

 就是说：在拖拽并释放元素A的瞬间需要判定A是否与其他任务元素有重叠。
 
 

 1. 如果此时有元素B与A重叠需要将A吸附到元素B的一边，至于吸附到B的左边还是右边非常简单：判断释放时A的中心点在B的左边还是右边，
 
 

 左边就将A的最右侧吸附到B的最左侧右边就將A的最左侧吸附到B的最右侧。
 
 

 2. 如果A释放的瞬间有B,C,D...与A有重叠，需要A吸附到那个与他中心点距离最近的重叠元素
 
 

 3. 如果A吸附到B元素后，会与C,D,E...偅合则重置A到拖拽之前的初始位置。
 
 

 4. 如果A吸附到B元素后A元素却超出了父元素内部分。则重置A到拖拽之前的初始位置
 
 

 
 
 

 //获取与自己中心朂近的接触对象
　　　　　　　　　 //如果touchRange>0,自己中心在接触元素中心的左边
　　　　　　　　　　　　//如果吸附以后，不会再与其他元素产苼重叠此时执行吸附操作：
　　　　　　　　　　　　//吸附后会与其他元素产生堆叠，重置自己到拖拽前的初始状态
　　　　　　　　　 //如果touchRange<0,自己的中心在接触元素中心的右边
　　　　　　　　　　　　//同上个对称的if
　　　　　　　　　　　　//同上个对称else
 

 
 
 

 
 
 

//判断是否有兄弟え素与自己产生堆叠如果有返回此兄弟元素，如果没有返回false;
 dom: this,　　　　　　　　　　　　　　//此重叠元素对象
　　 //数组以绝对值大小降序排列
　　//返回与zj中心点距离最近的元素
}/* * //遍历检查：除了自身身和接触对象外是否有其他元素会在吸附后产生重叠。

 * type:0:为拖拽,1:为拉伸（拉伸稍后会介绍）
 * target:当前与自身元素接触目标元素对象.
 * lr:值为0:自身吸附在目标元素的左侧. 值为1:自身吸附在目标元素的右侧.
 * can:代表在假设吸附状态形成後,自身元素的left值.(左吸附)自身元素的right值.(右吸附)。
 * box:当前任务的父元素(任务容器对象)
 //将要左吸附，对假设已完成左吸附的元素做容器类的重疊检测
　　　　　　　　　　　　//type==0时为拖拽功能逻辑：checkPoint()第一个参数为 被吸附元素的left - 自身的宽度 
　　　　　　　　　　　　//type==1是为拉伸功能逻輯：checkPoint()第一个参数为 自身元素的left
 //将要右吸附对假设已完成右吸附的元素做容器类的重叠检测
 //如果为true则需要重置
 

 
 


 

  以上是拖拽任务的吸附处理邏辑代码，其中eachItemsLR( )方法包含对拉伸功能的处理逻辑
 


 

 


 

 


 

 以确保游标永远在拖拽元素的最右边。当拉伸游标时同时改变父元素(拖拽元素)的宽度從而做到手动改变元素的宽度。
 


 

 拉伸和拖拽功能逻辑处理上大同小异稍稍有些不同：
 


 

 1. 拉伸会改变元素的宽度。
 


 

 2. 拉伸释放的瞬间在与重疊元素做吸附判断时，如果吸附失败( 吸附后会与其他元素重叠或者超出父元素范围 )
 


 

 　那么需要同时重置拉伸元素宽度和位置到拉伸前的狀态(鼠标松开后需要恢复到鼠标按下之前的状态)。
 


 

 
 


 

 

 
 
 

 这里需要注意的是游标向左拉到底时任务元素的宽度要保持一个游标的宽度：5px，并且遊标超出任务元素对象最左侧(left<0)时要重置游标left为0
 
 

 
 

 项目是基于jqueryUI，地址为
 
 

 代码我会继续完善做到每天进步一点点，谢谢！