Keyboard arrow keys to move an element

1. Rendering

2. Implementation principle

The page listens for key events and moves the selected element when the arrow keys are pressed.

//Shortcut keys to control movement
    $(document).keydown(function (event) {
        var keyNum = event.which
        var item = $('#' + curRectangle)
       //animate has this function, -=2 means that the original value -2 is assigned to this property.
        switch (keyNum) {
            case 37:
                item.animate({left:'-=2'},0)
                break;
            case 38:
                item.animate({top:'-=2'},0)
                break;
            case 39:
                item.animate({left:'+=2'},0)
                break;
            case 40:
                item.animate({top:'+=2'},0)
                break;
            default: {
                break;
            }
        }

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325809465&siteId=291194637