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

Question

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

我猜可能是因为 position 是相对的？ 虽然我尝试将其更改为绝对和父 div 作为相对，但仍然没有工作。 我也尝试过使用边距，但出现了同样的问题。

 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'; } function moveRight(){ objImage.style.left=parseInt(objImage.style.left)+5 +'px'; // objImage.style.position='static'; } function moveDown(){ objImage.style.top=parseInt(objImage.style.top)+5 +'px'; // objImage.style.position='static'; } window.addEventListener("keydown", getKeyAndMove); }); } }

 .list { display: flex; flex-flow: column; flex: 1; width: 100%; min-width: 250px; max-width: 350px; height: 100%; min-height: 150px; background-color: rgba(0, 0, 0, 0.1); margin: 0 15px; padding: 8px; transition: all 0.2s linear; }.list.list-item { background-color: #F3F3F3; border-radius: 8px; padding: 15px 20px; text-align: center; margin: 4px 0px; }

 <div class="list" id="list"> <h2>Menu Items</h2> <div class="list-item" draggable="true">List item 1</div> <div class="list-item" draggable="true">List item 2</div> <div class="list-item" draggable="true">List item 3</div> </div>

编辑通过@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
    }
}

---

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

或者，如果我双击相同的元素，它会将其捕捉回原来的 position

当用户拖动元素时，这是某些“标准”行为或浏览器对行为方式的“预设”的结果。 您可以通过几种方式禁用此“标准”行为，一种是使用一点 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”键的同时按下箭头键时移动不同的距离。