实现div⿏标拖动效果
实现这个效果的关键是给div的定位设置成absolute，然后获得⿏标移动后的位置坐标并给要移动的div。 我将它封装成了⼀个函数，只需要传⼊参数即可使⽤。
downDiv:⿏标按下部分的id；
moveDiv：跟随⿏标移动的div的id;
代码如下：
1
2<!DOCTYPE html>
3<html lang="zh">
4<head>
5<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
6<title>jquery实现div拖拽</title>
7<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
8<style type="text/css">
9    #moveBar {
10    position: absolute;
11    width: 200px;jquery弹出div窗口
12    height: 400px;
13    background: black;、
14    color：white;
15    border: solid 1px #000;
16    }
17    #banner {
18    background: #ddd;
19    cursor: move;
20    }
21</style>
22</head>
23<body>
24    <div id="moveBar">
25        <div id="banner">按住⿏标移动当前div</div>
26        <div id="content">内容部分</div>
27    </div>
28<script>
29    $(function () {
30        dragPanelMove("#banner","#moveBar");
31        function dragPanelMove(downDiv,moveDiv){
32            $(downDiv).mousedown(function (e) {
33                    var isMove = true;
34                    var div_x = e.pageX - $(moveDiv).offset().left;
35                    var div_y = e.pageY - $(moveDiv).offset().top;
36                    $(document).mousemove(function (e) {
37                        if (isMove) {
38                            var obj = $(moveDiv);
39                            obj.css({"left":e.pageX - div_x, "top":e.pageY - div_y});
40                        }
41                    }).mouseup(
42                        function () {
43                        isMove = false;
44                    });
45            });
46
47        }
48
49    });
50</script>
51</body>
52

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。