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

Love The Way You Lie 2022-04-08 08:18 675阅读 0赞

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hpYW9kb25nZ2U1MjE_size_16_color_FFFFFF_t_70][]

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

概述：实现拖拽工作流程配置，可以鼠标左右移动元素，来控制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
    }

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hpYW9kb25nZ2U1MjE_size_16_color_FFFFFF_t_70]: /images/20220407/15094b9629b0404081f6bd9c02b24e3a.png