原生javascript实现拖动元素示例代码_javascript技巧
程序员文章站
2022-04-30 12:22:03
...
本文介绍原生javascript实现元素拖动。
思路：
1.首先改变被拖动元素的布局属性，关键是“position:absolue”；
2.捕捉鼠标事件"mousedown","mousemove","mouseup"；
3.当触发"mousedown"时，记录下当前鼠标在元素中的相对位置，_x,_y；
4.紧接着处理"mousemove"事件，通过改变元素的top和left属性来移动元素；
5.当触发"mouseup"时间时，终止拖动。
同时，应考虑代码的封装性和浏览器的兼容性，代码如下：
draggable div