点击实现List A、B、C间列表项双向移动的技术需求

Got it, here's a complete implementation that meets your requirements—three lists with bidirectional movement between A/C and B, plus items in B can return to their original list. I'll break it down with HTML, CSS, and vanilla JavaScript so it's easy to follow and modify.

HTML Structure #

We'll set up three side-by-side list containers, with List B starting empty. Each list item will get a data-original-list attribute later to track where it came from.

<div class="lists-wrapper">
  <div class="list-container">
    <h3>List A</h3>
    <ul id="list-a">
      <li>Item A1</li>
      <li>Item A2</li>
      <li>Item A3</li>
    </ul>
  </div>

  <div class="list-container">
    <h3>List B (Container)</h3>
    <ul id="list-b"></ul>
  </div>

  <div class="list-container">
    <h3>List C</h3>
    <ul id="list-c">
      <li>Item C1</li>
      <li>Item C2</li>
      <li>Item C3</li>
    </ul>
  </div>
</div>

CSS Styling #

We'll use flexbox to arrange the lists horizontally, and add some basic styling to make items look interactive:

.lists-wrapper {
  display: flex;
  gap: 2rem;
  padding: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.list-container {
  flex: 1;
  border: 1px solid #eee;
  padding: 1rem;
  border-radius: 8px;
}

.list-container h3 {
  margin-top: 0;
  color: #333;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 0.5rem;
  margin: 0.3rem 0;
  background-color: #f5f5f5;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

li:hover {
  background-color: #e0e0e0;
}

#list-b li {
  background-color: #e8f4fd;
}

JavaScript Logic #

We'll use event delegation to handle clicks on list items, so we don't have to reattach listeners every time items are moved. The key is storing the original list ID in a data attribute for each item:

// Get references to all three lists
const listA = document.getElementById('list-a');
const listB = document.getElementById('list-b');
const listC = document.getElementById('list-c');

// Handle moving items from A/C to B
function moveToContainer(event) {
  const item = event.target;
  if (item.tagName !== 'LI') return; // Ignore clicks on non-list items

  // Store the original list ID as a data attribute
  item.dataset.originalList = event.currentTarget.id;
  // Move the item to List B
  listB.appendChild(item);
}

// Handle moving items from B back to their original list
function moveBackToOriginal(event) {
  const item = event.target;
  if (item.tagName !== 'LI') return;

  const originalListId = item.dataset.originalList;
  const originalList = document.getElementById(originalListId);
  
  if (originalList) {
    originalList.appendChild(item);
    // Remove the data attribute (optional, but cleans up)
    delete item.dataset.originalList;
  }
}

// Attach event listeners to the source lists and container list
listA.addEventListener('click', moveToContainer);
listC.addEventListener('click', moveToContainer);
listB.addEventListener('click', moveBackToOriginal);

Key Features Explained #

• Event Delegation: By attaching listeners to the <ul> elements instead of individual <li>s, we automatically handle clicks on items even after they're moved between lists.
• Data Attribute Tracking: The data-original-list attribute remembers which list each item came from, so we know exactly where to send it back when clicked in List B.
• Smooth Interaction: Hover effects and cursor changes make it clear that items are clickable.

You can test this by clicking any item in List A or C—it will jump to List B. Click an item in List B, and it will return to its original list.

内容的提问来源于stack exchange，提问作者tharid