jquery 拖拽

来源：互联网发布：主播的网络热门歌曲编辑：程序博客网时间：2024/06/04 20:10
<html><head>    <meta charset="utf-8">    <title></title>    <meta name="viewport"          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>    <script src="../../bower_components/jquery/dist/jquery.min.js"></script>    <style type="text/css">        #div {            position: relative;            width: 500px;            height: 400px;            background: #ccc;        }        .drag {            position: absolute;            width: 100px;            height: 100px;            border: 1px solid #ddd;            background: red;            text-align: center;            padding: 5px;            top: 100px;            left: 20px;            cursor: pointer;            -webkit-user-select: none;        }    </style></head><body><div id="div">    <div class="drag">这个可以拖动哦</div></div></body></html><script type="text/javascript">    // 模块拖拽    $(function () {        var drag = $(".drag"),                falg = false,                h = $("#div").height() - 100,                w = $('#div').width() - 120;        var pagex, pagey;        drag.mousedown(function (e) {            var self = $(this);            falg = true;            pagex = e.pageX - parseInt(self.css("left"));            pagey = e.pageY - parseInt(self.css("top"));            self.css('background', 'yellow');        });        $(document).mousemove(function (e) {            if (falg) {                var l = e.pageX - pagex,                        t = e.pageY - pagey;                if (l >= w) {//拖拽出界条件                    l = w;                } else if (l <= 0) {                    l = 0;                }                if (t >= h) {                    t = h;                } else if (t <= 0) {                    t = 0;                }                drag.css({top: t, left: l});            }        }).mouseup(function () {            falg = false;            drag.css('background', 'red');        });    });</script>
0 0