js分隔条实现拖拽功能(支持左右拖动)

本文分享了一种通过鼠标左右拖动控制div宽度的方法,详细解析了拖拽方向反常问题的解决思路,适用于工作流程配置场景。

这次记录就不贴代码了,只是记录一下原理和思路,因为代码封装的太严格,所以不好拿出来。

lz的页面是左右各一个分隔条实现拖拽的,左边是框架自带一个功能没问题,右边是lz模仿做的,结果样子是做出来了,就是左右拖拽的方向反了,向左拖应该是增大,它却缩小,向右应该是缩小,却是增大。

这个问题停了好几天,终于静下心来解决了。废话不说了,我直接说思路,大家有问题的话也可以试一下;

概述:实现拖拽工作流程配置,可以鼠标左右移动元素,来控制div的宽度;

基本原理:就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然,并不是任何时候移动鼠标都要造成元素的移动,而应该判断鼠标左键的状态是否为按下状态,是否是在可拖拽的元素上按下的。

拖拽状态 = 0鼠标在元素上按下的时候{      
    拖拽状态 = 1      
    记录下鼠标的x和y坐标      
    记录下元素的x和y坐标      
   }   
 鼠标在元素上移动的时候{      
    如果拖拽状态是0就什么也不做。      
    如果拖拽状态是1,那么      
    元素y = 现在鼠标y - 原来鼠标y + 原来元素y      
    元素x = 现在鼠标x - 原来鼠标x + 原来元素x      

    }       
 鼠标在任何时候放开的时候{      
    拖拽状态 = 0      
}  

lz遇到的问题是:

向左拖拽  结果会缩小  应该是增大。 1095-1119 +240  = 216    p.x < start.x
向右拖动  结果会增大  应该是缩小     1145-1119 +240  = 266    p.x > start.x

经过上述推理,最后的解决方法是:

//p.x :拖拽后的x坐标;
//start.x : 未拖拽时的x坐标,也就是默认的;
//当x大于默认的x坐标时,是向左,应该是增大宽度
if(p.x < start.x){
	绝对值+宽度
}else if(p.x > start.x){//当x小于默认的x坐标时,是向右,应该是缩小宽度
	//取负数 + 240
}

最后呢完美解决,分隔条的代码呢网上搜一下好多,具体大家可以挑一个来使用。如果遇到问题呢还是先好好分析一下这个拖拽的原理。如果有问题还请大家留言讨论。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值