Javascript jquery-拖动时按下shift按钮时在x轴上移动bux

我为这段代码创建了小提琴 问题是，当按下shift键时，我不知道如何使div在x轴上移动

请看这里：

JS：

    $(document).ready(function () {

    $('div').mousedown(function () {
        var dragElement = $(this);

        $(document).mousemove(function (e) {
            var elementWidth = dragElement.width() / 2;
            var elementHeight = dragElement.height() / 2;

            var x = e.pageX - elementHeight;
            var y = e.pageY - elementWidth;
            dragElement.css({top: y + 'px', left: x + 'px', backgroundColor: 'red'});

            $(document).on('keydown',function(e){
                if(e.which == 16){

                }

            });

        });
        $('div').mouseup(function () {
            $(document).unbind('mousemove');
            dragElement.css({backgroundColor:'gray'})
        })
    });

});

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

    div {
        position: absolute;
        width: 140px;
        height: 140px;
        background-color: gray;
        top: 0;
        left: 0;
    }

    div:hover, div:active {
        cursor: move;
    }

HTML：

    $(document).ready(function () {

    $('div').mousedown(function () {
        var dragElement = $(this);

        $(document).mousemove(function (e) {
            var elementWidth = dragElement.width() / 2;
            var elementHeight = dragElement.height() / 2;

            var x = e.pageX - elementHeight;
            var y = e.pageY - elementWidth;
            dragElement.css({top: y + 'px', left: x + 'px', backgroundColor: 'red'});

            $(document).on('keydown',function(e){
                if(e.which == 16){

                }

            });

        });
        $('div').mouseup(function () {
            $(document).unbind('mousemove');
            dragElement.css({backgroundColor:'gray'})
        })
    });

});

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

    div {
        position: absolute;
        width: 140px;
        height: 140px;
        background-color: gray;
        top: 0;
        left: 0;
    }

    div:hover, div:active {
        cursor: move;
    }

---

所以你的意思是“补挂”功能是正确的，但你想让它只在按下shift键时移动？是吗？@AnujaAgarwal是的。我只是想让我的元素在用户按下shift键并移动鼠标时在x轴上移动，但如果没有，拖放应该正常进行