我正在嘗試使用單選按鈕來制作一個卡片轉盤，該按鈕只能在手機上點擊，并且希望能夠在手機上拖動卡片，這樣對用戶更友好。我有一個保存無線電輸入的容器和一個保存卡片的div，還有一個覆蓋卡片的錨元素，URL根據使用JavaScript中的函數選擇的無線電輸入而變化。下面是我正在使用的代碼。

我目前擁有的:

function myFunction() {
  if (document.getElementById('item-1').checked) {
    document.getElementById('linkid').;
  }
  if (document.getElementById('item-2').checked) {
    document.getElementById('linkid').;
  }
  if (document.getElementById('item-3').checked) {
    document.getElementById('linkid').;
  }
}

.card {
  position: absolute;
  width: 83%;
  height: 46%;
  left: 0;
  right: 0;
  margin: auto;
  transition: transform .4s ease;
  cursor: pointer;
}

.container {
  width: 100vw;
  margin: 0 auto;
  max-width: 800px;
  max-height: 222px;
  height: 100%;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.cards {
  position: relative;
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
}

.card {
  cursor: move;
}

.card.over {
  border: 3px dotted #666;
}

.radioInput {
  display: none;
}

#linkid {
  width: 499px;
  height: 404px;
  left: 67px;
  position: absolute;
  z-index: 5;
}

#item-1:checked~.cards #song-3,
#item-2:checked~.cards #song-1,
#item-3:checked~.cards #song-2 {
  transform: translatex(-94%) scale(.8);
  opacity: .4;
  z-index: 0;
}

#item-1:checked~.cards #song-2,
#item-2:checked~.cards #song-3,
#item-3:checked~.cards #song-1 {
  transform: translatex(94%) scale(.8);
  opacity: .4;
  z-index: 0;
}

#item-1:checked~.cards #song-1,
#item-2:checked~.cards #song-2,
#item-3:checked~.cards #song-3 {
  transform: translatex(0) scale(1);
  opacity: 1;
  z-index: 1;
  img {
    box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
  }
}

<div class="container hidedesktop mobileDrag" style="margin-bottom: 40px;">
  <input class="radioInput" type="radio" onclick="myFunction()" name="slider" id="item-1" draggable="true">
  <input class="radioInput" type="radio" onclick="myFunction()" name="slider" id="item-2" draggable="true" checked="">
  <input class="radioInput" type="radio" onclick="myFunction()" name="slider" id="item-3" draggable="true">
  <div class="cards">
    <a class="hidedesktop"  id="linkid"></a>
    <label class="card" for="item-1" id="song-1">
        <img src="https://netpayadvance.com/wp-content/uploads/2023/05/Glossary-Card-Mobile-1.webp" alt="Glossary page preview" loading="lazy">
    </label>
    <label class="card" for="item-2" id="song-2">
        <img src="https://netpayadvance.com/wp-content/uploads/2023/05/Personal-Blog-Card-Mobile.webp" alt="Blog page preview" loading="lazy">
    </label>
    <label class="card" for="item-3" id="song-3">
        <img src="https://netpayadvance.com/wp-content/uploads/2023/05/FAQ-Card-Mobile.webp" alt="FAQ page preview" loading="lazy">
    </label>
  </div>
</div>