在 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”鍵的同時按下箭頭鍵時移動不同的距離。