在javascript中使用箭头键移动所选元素

Question

我有一个项目列表，我希望能够选择一个项目（通过单击）并使用箭头键仅移动该特定项目。我完成了移动部分，但是当我选择第二个元素时，它也会移动先前选择的元素。或者，如果我双击同一个元素，它会将其捕捉回原来的位置。

我猜可能是因为位置是相对的？尽管我尝试将其更改为 absolute 并将 parent div 更改为 relative ，但仍然没有用。我也尝试过使用边距，但出现了同样的问题。

move();

function move(){

    let list_items = document.querySelectorAll('.list-item');

    for (let i = 0; i < list_items.length; i ++){

        let list=list_items[i];

        list.addEventListener('click',function(){

            console.log(list);

            var objImage= null;

            objImage=list;              

            objImage.style.position='relative';

            objImage.style.left='0px';

            objImage.style.top='0px';

            

            function getKeyAndMove(e){  

                            

                var key_code=e.which||e.keyCode;

                switch(key_code){

                    case 37: //left arrow key

                    moveLeft();

                    break;

                    case 38: //Up arrow key

                    moveUp();

                    break;

                    case 39: //right arrow key

                    moveRight();

                    break;

                    case 40: //down arrow key

                    moveDown();

                    break;

                    default:

                    console.log(e);                         

                }

            }

            function moveLeft(){

                objImage.style.left=parseInt(objImage.style.left)-5 +'px';

                // objImage.style.position='static';

            }

            function moveUp(){

                objImage.style.top=parseInt(objImage.style.top)-5 +'px';

                // objImage.style.position='static';

            }

        });

    }

}

编辑通过@rexfordkelly 提出的解决方案使其工作。这是他分享的游乐场链接jsfiddle.net/r7ao2n5f/1

Answer 1

如果我理解你的问题，以及你想要的行为：移动一个或多个选定的项目，使用鼠标进行选择，并通过按键进行移动，向上、向下、向左和向右。我认为您几乎拥有它，唯一的事情是您的选择永远不会被清除，这应该是在移动后发生任何点击时。您可以考虑对模式中的行为进行建模。选择移动在伪代码中完成的行为将是这样的：let mode = 0; // selection modelet selections = [];... key press event Listeners... click event Listenersfunction processAction( action, event ) {&nbsp; &nbsp; If ( 'click' == action && 0 != mode ){ // was in move mode&nbsp; &nbsp; &nbsp; &nbsp; mode = 0; // Set to selection mode.&nbsp; &nbsp; &nbsp; &nbsp; selections = []; // resets the selections made&nbsp; &nbsp; &nbsp; &nbsp; ... // reset DOM, and clear any currently decorated elements&nbsp; &nbsp; }&nbsp; &nbsp; if ( 'click' == action) {&nbsp; &nbsp; &nbsp; &nbsp; selections.push(event.targetElement);&nbsp; &nbsp; &nbsp; &nbsp; ...// Update DOM and decorate elements&nbsp; &nbsp; }&nbsp; &nbsp; If ( 'move' === action && mode !== 1) {&nbsp; &nbsp; &nbsp; &nbsp; mode = 1; // This enters us into "Move" mode.&nbsp; &nbsp; }&nbsp; &nbsp; If ( 'move' === action ){&nbsp; &nbsp; &nbsp; &nbsp; // Execute moving logic&nbsp; &nbsp; }}要解决您的“双击”问题。或者，如果我双击同一个元素，它会将其捕捉回原来的位置当用户拖动元素时，这是某些“标准”行为或浏览器对行为方式的“预设”的结果。您可以通过几种方式禁用此“标准”行为，一种是使用一点 CSS.list-item&nbsp; {&nbsp;&nbsp; -webkit-user-drag: none;&nbsp;&nbsp; -khtml-user-drag: none;&nbsp;&nbsp; -moz-user-drag: none;&nbsp;&nbsp; -o-user-drag: none;&nbsp;&nbsp; user-drag: none;&nbsp;}&nbsp;您可以在此处了解有关 MDN 上此“默认”行为的更多信息，内容如下：如果未设置此属性，则其默认值为 auto，这意味着拖动行为是默认浏览器行为：只能拖动文本选择、图像和链接...哦，我忘了提，你可以简单地将你的事件监听器附加到id="list"元素上，因为所有孩子的点击事件都会冒泡并被拦截。您可以在此处找到有关如何确定单击了哪个元素的详细信息，以及有关事件如何在此处冒泡的更多信息，以及在此处的MDN 上，特别是“冒泡和捕获解释”部分PS：我在一些应用程序中也看到过，它们具有相似的行为，用鼠标进行选择，用箭头键移动。它们允许用户在按住“shift”键的同时按下箭头键时移动不同的距离。