jQuery实现拖动

最新推荐文章于 2021-02-18 18:36:29 发布

蔚蓝蒲公英

最新推荐文章于 2021-02-18 18:36:29 发布

阅读量1.9k

点赞数

分类专栏： web前端文章标签： jquery 对象鼠标浏览器拖拽

本文链接：https://blog.csdn.net/Tan_D/article/details/76546215

版权

本文介绍了如何使用jQuery实现拖动功能。通过设置对象定位、捕获鼠标坐标，结合mousedown、mouseup、mousemove事件，以及bind()和unbind()方法，实现元素的拖拽交互。同时，文章还提及了通过event.button判断鼠标按键状态。

摘要由CSDN通过智能技术生成

思路：

定位：给要拖动的对象设置一个定位（position：aboselute);
坐标：使用event.clientX、event.clientY获取鼠标位置，使用obj.offset().left、obj.offset().top获取对象离浏览器左上角的坐标；
事件：mousedown,mouseup,mousemove三大鼠标事件；
事件绑定与移除：bind()和unbind()；
鼠标键的判断：使用event.button可以获得鼠标码（0：左键，1：滑轮，2：右键）
代码如下：

    function drag(obj)    //obj为需要拖动DOM的jQuery对象
    {
   
        obj.bind("mousedown",start);
        function<

关注

专栏目录