标签归档：元素拖动

demo神马的、html、javascript、jquery、无聊产物、笔记

做了个元素拖动实验

一条评论

iframe框引用demo：

原始demo地址:http://www.luojia.tk/shiyanshi.php?id=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
44
45
 
<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>