拖拽以及沿拖拽轨迹返回(js原生练习)

dome地址:laihuamin.github.io/jsExample/html/six1.html

拖拽以及沿拖拽轨迹返回(js原生练习)_第1张图片

js部分

1、获取dom元素以及定义一下要用的变量,及初始化内容。

拖拽以及沿拖拽轨迹返回(js原生练习)_第2张图片

2、给内容块添加鼠标按下事件,drag为true时,便成为可拖拽状态。

拖拽以及沿拖拽轨迹返回(js原生练习)_第3张图片

3、给全局制定鼠标松开事件,窗口失去焦点事件,onlosecapture事件(当元素失去鼠标移动所形成的选择焦点时触发)

拖拽以及沿拖拽轨迹返回(js原生练习)_第4张图片

4、鼠标移动事件,根据计算可以得出移动数据将其push到数组中。

拖拽以及沿拖拽轨迹返回(js原生练习)_第5张图片
拖拽以及沿拖拽轨迹返回(js原生练习)_第6张图片

5、然后给文字添加点击事件,是的其做pop操作,按原轨迹返回。

拖拽以及沿拖拽轨迹返回(js原生练习)_第7张图片

你可能感兴趣的:(拖拽以及沿拖拽轨迹返回(js原生练习))