矢印キーで特定のdivを移動させる方法（ボタンをクリックして指定）

debugcn 投稿 Dev

フランシスカリオスダーキン

2つのdiv（＃1と＃2）と2つのボタンがあります。ボタンをクリックすると、移動するdivが選択され、矢印キーを押すと、このdivが移動します。もう一方はその場所にとどまる必要があります。他のボタンがクリックされた場合、以前に移動したdivは新しい位置に留まり、新しく選択されたdivは矢印キーと一緒に移動するはずです。

.counter {
                border-radius:50%;
                width:20px;
                height:20px;
                position:absolute;
                transition:top linear 0.6s, left linear 0.6s;
                font-size:20px;
                font-weight:bold;
                text-align:center;
                padding:20px;
                top: 525px;
                left: 60px;
                background-color:red;
            }

<button onclick="one">Move One</button>
           <button onclick="two">Move Two</button>
           <div class="counter" id="1" >1</div>
           <div class="counter" id="2">2</div>

 var go = "1"
               function one() {
                   go = "1"
               }
               function two() {
                   go = "2"
               }

document.onkeydown = detectKey;
        function detectKey(e) {
    
        var posLeft = document.getElementById('').offsetLeft
        var posTop = document.getElementById('').offsetTop
        
            if (e.keyCode == '39') {
                if (go === "1") {
        document.getElementById('1').style.left  = (posLeft+150)+"px"
        }  
            if (e.keyCode == '38') {
        document.getElementById('1').style.top  = (posTop-150)+"px"
        }
            }
            
            if (e.keyCode == '39') {
                if (go === "2") {
        document.getElementById('2').style.left  = (posLeft+150)+"px"
        }  
            if (e.keyCode == '38') {
        document.getElementById('2').style.top  = (posTop-150)+"px"
        }
            }
    }

リチャードハンター

これが解決策です。値を少し編集しましたが、簡単に元に戻すことができます。

const buttonOne = document.getElementById('button-one');
const buttonTwo = document.getElementById('button-two');

const elementOne = document.getElementById('one');
const elementTwo = document.getElementById('two');

buttonOne.addEventListener('click', clickOnButtonOne);
buttonTwo.addEventListener('click', clickOnButtonTwo);

let selectedElement = null;

function clickOnButtonOne() {
  selectedElement = elementOne;
}

function clickOnButtonTwo() {
  selectedElement = elementTwo;
}

document.onkeydown = detectKey;

function detectKey(e) {
  if (selectedElement) {
    if (e.keyCode == '39') {
      var posLeft = selectedElement.offsetLeft
      selectedElement.style.left = (posLeft + 50) + "px"
    }
    if (e.keyCode == '38') {
      var posTop = selectedElement.offsetTop
      selectedElement.style.top = (posTop - 50) + "px"
    }
  }
}

.counter {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  position: absolute;
  transition: top linear 0.6s, left linear 0.6s;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  padding: 20px;
  top: 500px;
  left: 60px;
  background-color: red;
}

<button id="button-one" onclick="one">Move One</button>
<button id="button-two" onclick="two">Move Two</button>

<div class="counter" id="one">1</div>
<div class="counter" id="two">2</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]