【前端 5】拖拽

简述：实现拖拽，关键的地方：鼠标抬起（mouse-up）事件、鼠标落地(mouse-down)事件、对象的拖拽事件。那么在这个过程中，需要注意的点是：获取鼠标焦点在可视窗口的具体位置（x,y），以及各个浏览器的兼容，鼠标的可拖拽范围控制等！

1.1，让指定对象可拖拽

本行代码表示，获取所有div的ID前缀是chooseCourse的对象，并设置其属性为可拖拽。draggable方法里面有很多的属性，包括是否可复制、拖动范围控制、透明度等等，这里因为实际情况，并没有配置任何属性！



1.2，（mouse-down）克隆当前对象，供下次拖拽


1.3，（mouse-up）执行鼠标抬起时的事件
在这个步骤中，需要控制拖拽范围和获取鼠标抬起时的位置：



1.4，代码调用





二、总结


在这个过程中要点，除了上面的之外，对于准确获取到指定一个、多个对象也是一个比较关键的地方（就跟数据库查询玩儿模糊匹配似的，唉）。在这个过程中，发现框架有些封装好的，然后自己并不知道。有了框架之后，自己又完全依赖框架，是个麻烦事！

利用框架或者语言本身提供的方法，可以大大的缩减代码，提升代码质量！