自定义表单（一）--拖拽（JS版本）

一、瞎扯

     之前公司放我一个礼拜写了一个高度定制化，功能完善的自定义表单，然而因为去年9月份，硬盘，u盘，存储卡接连坏掉，代码就没了，不过也多亏这个，避免了日后的官司问题（开个玩笑，此处捂着嘴偷笑），最近一直在恢复之前写过的一些重要的代码，因此顺便更深入地折腾一下这个问题，写一些不会惹官司的demo（这个还真的得严肃对待=_=||）。

     

二、JS拖拽

      2.1原理

            拖拽的过程其实只有三个：按下，移动，放开

            分别对应JS中的三个事件：

                   ------需拖拽部分的onmousedown

                          记录下点击时的鼠标位置信息，以及此时点击的节点的位置信息。

                          绑定document的onmousemove和onmouseup事件。

                   ------Document的onmousemove

                         记录当前鼠标的位置信息，然后计算出位移值，让刚才选中的节点的坐标的left和top分别加上位移值即可移动到当前位置。

                   ------Document的onmouseup

                          取消document的onmousemove和onmouseup事件。

              然后就完成了一次拖拽。

      2.2 JS的setCapture和releaseCapture

 //    if (target.setCapture) 
//	{
//	    target.setCapture();
//	}
//     else if (window.captureEvents) 
//	{
//	    window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
//	}

                   我看网上的很多拖拽教程都是用了这两个函数，但是去掉之后依然很正常，就去查询了一下资料，谷歌了一下，在MDN上找到了API：

element.setCapture(retargetToElement);
retargetToElement：
If true, all events are targeted directly to this element; if false, events can also fire at descendants of this element.

参数retargetToElement：如果为true，则所有的事件将直接导向这个元素，如果为false，则同时也将指向派生自这个元素的元素（子元素）

   function：Call this method during the handling of a mousedown event to retarget all mouse events to this element until the mouse button is released or document.releaseCapture() is called.
    功能：在mousedown绑定的函数中调用这个函数将重定向所有鼠标事件到这个元素直到鼠标被释放或者调用了document.releaseCapture()

因为在这里我绑定的是document的onmousemove和onmouseup，整个页面中的鼠标事件也能得到响应，拖动速度快了，鼠标超出了拖拽元素依然能得到响应，因此setCapture其实也不需要。

              

              2.3 移动算法

            原先采用的算法是

              

              黑色部分是浏览器页面，白色部分是拖拽元素，棕色部分是点击的圆点，黄色部分是是鼠标点击处在浏览器上的坐标位置（X，Y），红色部分则是鼠标点击处在拖拽元素中的偏移量（x,y）,因此实际上要设置的top和left值是(X-x,Y-y),这里稍后还得普及一下各种位置信息的区别以及获取方法，不过这种方法的效果并不是很理想，所以就还整了新的方法，在mousedown时记录鼠标位置信息，然后在mousemove中，记录鼠标位移的变化值，把值直接加在拖拽元素的坐标上面就好了。

          

             2.4 区分offsetX layerX PageX clientX 值

offsetX:

        IE特有（新版本浏览器 除了ff都支持）,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值。

layerX:

        FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点，

也就是当触发元素设置了相对或者绝对定位后,layerX和offsetX就幸福地生活在一起^-^,几乎相等,唯一不同就是一个从border为参考点,一个以内容为参考点

PageX和clientX ,这个两个比较容易搞混,

         PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化

clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器的可视窗口为参考点,随滑动条移动 而变化.

IE中没有PageX，解决办法：

         PageY=clientY+scrollTop-clientTop;

页面上的位置=可视区域位置+页面滚动条切去高度-自身border高度

三、源码

https://github.com/wlmnzf/javascript-train/tree/master/customForm

四、感谢

1.MDN- Element.setCapture()

2.各个浏览器中鼠标位置的属性 offsetX layerX PageX clientX （自由拖动框，防止文字选中）

3. JavaScript实现最简单的拖拽效果

欢迎扫码或者搜索 “会打代码的扫地王大爷” 关注公众号