如何用JavaScript/jQuery实现点击切换主视频与列表视频的容器位置

要实现主视频区域与列表视频的互相切换，核心是交换两个容器的完整内容（包含视频、用户名、下拉菜单等附属UI），而非仅移动单个video元素，这样能保留所有交互组件的功能。以下是两种实现方案：

一、原生JavaScript实现 #

// 获取核心容器
const mainVideoContainer = document.querySelector('.main-video');
const listVideoContainer = document.querySelector('.video-list .videoWrap');

// 绑定主视频区域点击事件
mainVideoContainer.addEventListener('click', function(e) {
  // 排除下拉菜单区域的点击，避免误触发
  if (!e.target.closest('.dropdown')) {
    swapVideos();
  }
});

// 绑定列表视频容器点击事件
listVideoContainer.addEventListener('click', function(e) {
  if (!e.target.closest('.dropdown')) {
    swapVideos();
  }
});

// 核心切换逻辑
function swapVideos() {
  // 深克隆两个容器的完整内容，避免引用冲突
  const mainContent = mainVideoContainer.cloneNode(true);
  const listContent = listVideoContainer.cloneNode(true);

  // 清空并交换内容
  mainVideoContainer.innerHTML = '';
  mainVideoContainer.appendChild(listContent);
  
  listVideoContainer.innerHTML = '';
  listVideoContainer.appendChild(mainContent);

  // 重新初始化Bootstrap下拉组件（DOM更新后原实例失效）
  new bootstrap.Dropdown(document.querySelector('.main-video .dropdown-toggle'));
  new bootstrap.Dropdown(document.querySelector('.video-list .dropdown-toggle'));

  // 保持视频播放状态（按需调整）
  const mainVideo = mainVideoContainer.querySelector('video');
  const listVideo = listVideoContainer.querySelector('video');
  mainVideo?.play();
  listVideo?.play();
}

关键要点 #

• 用cloneNode(true)深克隆内容，确保所有子元素和结构被完整复制
• 过滤下拉菜单的点击事件，防止误触切换
• DOM结构更新后，必须重新初始化Bootstrap下拉组件，否则菜单无法正常展开
• 可选：保留视频播放状态，提升切换时的流畅度

二、jQuery实现 #

$(document).ready(function() {
  // 主视频区域点击事件
  $('.main-video').on('click', function(e) {
    if (!$(e.target).closest('.dropdown').length) {
      swapVideos();
    }
  });

  // 列表视频容器点击事件
  $('.video-list .videoWrap').on('click', function(e) {
    if (!$(e.target).closest('.dropdown').length) {
      swapVideos();
    }
  });

  // 核心切换函数
  function swapVideos() {
    const mainContent = $('.main-video').html();
    const listContent = $('.video-list .videoWrap').html();

    // 交换内容
    $('.main-video').html(listContent);
    $('.video-list .videoWrap').html(mainContent);

    // 重新初始化下拉菜单
    $('.dropdown-toggle').dropdown();

    // 恢复视频播放
    $('.main-video video').get(0).play();
    $('.video-list video').get(0).play();
  }
});

可选样式优化 #

给可点击区域添加光标提示，明确交互性：

.main-video, .video-list .videoWrap {
  cursor: pointer;
}

注意事项 #

• 若列表存在多个视频，需给每个.videoWrap添加唯一标识，单独绑定点击事件
• 视频播放状态可根据需求调整，比如切换时暂停原视频、播放新视频
• 所有依赖DOM的交互组件（如下拉、弹窗），在DOM结构更新后都需重新初始化

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