用JQuery写拖拽的简单实例

最新推荐文章于 2024-03-04 15:08:00 发布

ForMyWebFrontSide

最新推荐文章于 2024-03-04 15:08:00 发布

阅读量1.4k

点赞数

分类专栏： JQuery javascript

本文链接：https://blog.csdn.net/ForMyQianDuan/article/details/49808923

版权

javascript 同时被 2 个专栏收录

111 篇文章 1 订阅

订阅专栏

JQuery

36 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    #dv1 {
        background: red;
        width: 100px;
        height: 100px;
        position: absolute;
    }
</style>
<body>
<div id="dv1"></div>
</body>
<script src="jquery-1.11.3.min.js"></script>
<!--<script type="text/javascript" src="jquery-1.10.1.min.js"></script>-->
<script>
    $(function () {
        var disX = 0;
        var disY = 0;
        alert(1);
        $('#dv1').mousedown(function(ev) {
            disX = ev.clientX - $(this).offset().left;
            disY = ev.clientY - $(this).offset().top;
            $(document).mousemove(function(ev) {
                $('#dv1').css('left', ev.pageX - disX);
                $('#dv1').css('top', ev.pageY - disY);
            });
            $(document).mouseup(function() {
                $(document).off();
            });
            return false;
        })
    })
</script>
</html>

ForMyWebFrontSide

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JQuery写拖拽的简单实例

html>html>head lang="en"> meta charset="UTF-8"> title>title>head>style> #dv1 { background: red; width: 100px; height: 100px; position: absolute; }s
复制链接

扫一扫