标签归档：元素拖动

笔记

做了个元素拖动实验

一条评论

iframe框引用demo：

原始demo地址:demo.luojia.me/moveelement/

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<style>
body{ margin:0px; }
</style>
<script src="jquery.js">
</script>
<div id="1" style="position:fixed; border:1px solid #000;height:200px;width:400px; text-align:center; line-height:200px;background-color:#69F;cursor:move">
点着拖我
</div>
<script>
clickpointx  =  0;
clickpointy  =  0;
divx  =   (window.innerWidth  -  400)  /  2;
divy  =   (window.innerHeight  -  200)  /  2;
$("#1").css("left",  divx);
$("#1").css("top",  divy);
$("#1").mousedown(function(event)  {
    $(document).unbind("mouseup");
    $(document).unbind("mousemove");
    $("#1").unbind("animate");
    event.preventDefault();
    var clickpointx  =  event.pageX;
    var clickpointy  =  event.pageY;
    $(document).mouseup(function(event)  {
        $(document).unbind("mouseup");
        $(document).unbind("mousemove");
        $("#1").animate({
            top:  divy
        },
        500);
        $("#1").animate({
            left:  divx
        },
        500);
    });
    $(document).mousemove(function(event)  {
        event.preventDefault();
        var pointx  =  event.pageX  -  clickpointx;
        var pointy  =  event.pageY  -  clickpointy;
        $("#1").css("left",  pointx  +  divx);
        $("#1").css("top",  pointy  +  divy);
    });
});
</script>