JS实现拖拽

简单的实现随意拖拽一个元素移动。最开始想到的是H5的拖放API,只拖不放,非常好用。然鹅,拖放就会有元素的影子跟着鼠标移动,所以 最后改成了用JS实现元素的拖拽。

第一步:监听目标元素的mousedown事件

第二步:在mousedown的处理事件内注册整个文档的mousemove事件和mouseup事件。(是整个文档的,而不是目标元素的,这样才有按下鼠标就可以随意在页面空白处内拖动元素)

第三步:在mousemove的处理事件内得到拖动的距离,写业务逻辑。在mouseup事件内置空mousemove和mouseup事件。

posted @ 2018-08-06 17:33  coconutGirl  阅读(249)  评论(0编辑  收藏  举报