js小例子之自定义右键菜单和jquery拖动元素

发表于 | 分类于 |

总结两个小实例，一个是jquery拖动元素，一个是js自定义右键菜单。感觉jquery的API都快忘了，所以又写了个jquery的。

js自定义右键菜单

我大概的想法是先隐藏列表菜单，当监听到oncontextmenu时，显示列表并定位到鼠标点击的地方。当页面有点击事件的时候，再来让列表显示。

这里可以用preventDefault或者return false；来阻止右键的默认行为。

代码如下：

1
2
3
4
5
<ul id="menu">
    <li><a href="">menu1</a></li>
    <li><a href="">menu1</a></li>
    <li><a href="">menu1</a></li>
</ul>

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
<script>
    var menu = document.getElementById("menu");
    menu.style.display = "none";

    document.oncontextmenu = function(event){
        event = event || window.event;

        var top = event.clientY;
        var left = event.clientX;

        console.log(top + "Hello" +left);

        menu.style.top = top + "px";
        menu.style.left = left + "px";
        menu.style.position = "absolute";

        menu.style.display = "block";

        event.preventDefault();
    }

    document.onclick = function(event){
        menu.style.display = "none";
    }
</script>

我老是忘记eft,top加后面的px单位。这个要注意。

jquery拖动元素

原理是一样的。首先对可以拖动的元素进行监听鼠标点下事件，然后获得点击位置距离点击元素的偏移量。最后再对这个鼠标移动时间进行监听，并把元素定位到该有的位置。最后当鼠标点击的时候一定要取消绑定mousemove事件。

1
2
3
<div class="dragObj">
    drag div
</div>

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
$(document).ready(function(){
    var mouseX=0,mouseY=0,
        offsetX,offsetY;
        
    $(".dragObj").mousedown(function(event) {
		event = event || window.event;
        console.log("aa");
        mouseX = event.clientX;
        mouseY = event.clientY;

        var offset = $(this).offset();
        var targetX = parseInt(offset.left,10);
        var targetY = parseInt(offset.top,10);

        offsetX = mouseX - targetX;
        offsetY = mouseY - targetY;

        $(this).bind("mousemove",dragElement);
    });


    function dragElement(e){
        var left = e.clientX - offsetX;
        var top = e.clientY - offsetY;

        $(this).css({
            "position":"absolute",
            "left":left+"px",
            "top":top + "px"
        });

        return false;
    }

    $(document).mouseup(function(event) {
        console.log("b");
        $(".dragObj").unbind("mousemove");
    });
})