在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 mode

let selections = [];

... key press event Listeners

... click event Listeners

function processAction( action, event ) {

    If ( 'click' == action && 0 != mode ){ // was in move mode

        mode = 0; // Set to selection mode.

        selections = []; // resets the selections made

        ... // reset DOM, and clear any currently decorated elements

    }

    if ( 'click' == action) {

        selections.push(event.targetElement);

        ...// Update DOM and decorate elements

    }

    If ( 'move' === action && mode !== 1) {

        mode = 1; // This enters us into "Move" mode.

    }

    If ( 'move' === action ){

        // Execute moving logic

    }

}

要解决您的“双击”问题。

或者，如果我双击同一个元素，它会将其捕捉回原来的位置

当用户拖动元素时，这是某些“标准”行为或浏览器对行为方式的“预设”的结果。您可以通过几种方式禁用此“标准”行为，一种是使用一点 CSS

.list-item  { 

  -webkit-user-drag: none; 

  -khtml-user-drag: none; 

  -moz-user-drag: none; 

  -o-user-drag: none; 

  user-drag: none; 

}

 

您可以在此处了解有关 MDN 上此“默认”行为的更多信息，内容如下：

如果未设置此属性，则其默认值为 auto，这意味着拖动行为是默认浏览器行为：只能拖动文本选择、图像和链接...

哦，我忘了提，你可以简单地将你的事件监听器附加到id="list"元素上，因为所有孩子的点击事件都会冒泡并被拦截。

您可以在此处找到有关如何确定单击了哪个元素的详细信息，以及有关事件如何在此处冒泡的更多信息，以及在此处的MDN 上，特别是“冒泡和捕获解释”部分

PS：我在一些应用程序中也看到过，它们具有相似的行为，用鼠标进行选择，用箭头键移动。它们允许用户在按住“shift”键的同时按下箭头键时移动不同的距离。