基于 jQuery 网页元素拖拽实现方法

发布于 2017-07-30 18:15:05 字数 786 浏览 2792 评论 0

如果是一个网页内的弹窗,我们希望他能够用鼠标实现拖拽,这个功能算是最基本的功能,通过jQuery我们可以轻松实现,只要在鼠标按下的时候,将元素的坐标偏移量设置为鼠标的偏移量就行了,下面请看代码。

var dragging = false;
var iX, iY;
$(".popup_title").mousedown(function(e){
    dragging = true;
    iX = e.clientX - parseInt(this_p.css('left'));
    iY = e.clientY - parseInt(this_p.css('top'));
    return false;
});
$(document).mousemove(function(e) {
    if (dragging) {
        //var e = e || window.event;
        var oX = e.clientX - iX;
        var oY = e.clientY - iY;
        this_p.css({"left":oX + "px", "top":oY + "px"});
        return false;
    }
})
$(document).mouseup(function(e) {
    dragging = false;
})

将上面的 .popup_title 替换为你需要用户安装鼠标实现拖拽的元素选择器。this_p 是我们整个可拖拽的最外层元素,你可以现在定义这个元素。拖动兼容IE浏览器。支持IE7+,firefox 3.0+,opera 10.0+,safari以上版本浏览器。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。