【ChatGpt】解决视频框交换中的平滑过渡的问题

news2025/11/4 7:52:56

【ChatGpt】解决视频框交换中的平滑过渡的问题

- 问题
- 抽象
- - chatgpt 看看直接给参考代码
- 解决
- 效果

问题

在视频的播放中，我们想调换下容器的位置，在互调的过程中，如果需要重新进行数据的初始化，获取与加载，就会很慢，效果不好。在这里插入图片描述

没有整改前的拖曳，有严重的加载缓慢，不丝滑

抽象

这个问题，直接抽象一下，就是一个div与另一个div交换，而不影响里面具体内容的播放。

chatgpt 看看直接给参考代码

在这里插入图片描述
代码肯定明显会有一定的问题，但大体逻辑是对的

<div class="container">
  <div class="box" draggable="true"></div>
  <div class="box" draggable="true"></div>
</div>

.container {
  display: flex;
  justify-content: center;
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 10px;
}

const boxes = document.querySelectorAll('.box');
let dragBox = null;

boxes.forEach(box => {
  box.addEventListener('dragstart', () => {
    dragBox = box;
  });

  box.addEventListener('dragover', e => {
    e.preventDefault();
  });

  box.addEventListener('drop', () => {
    if (dragBox !== box) {
      const dragBoxIndex = Array.from(boxes).indexOf(dragBox);
      const boxIndex = Array.from(boxes).indexOf(box);
      if (dragBoxIndex < boxIndex) {
        box.parentNode.insertBefore(dragBox, box.nextSibling);
      } else {
        box.parentNode.insertBefore(dragBox, box);
      }
    }
  });
});```

代码解释：

获取所有的box元素，并为每个元素添加拖拽事件监听。
当拖拽开始时，将当前拖拽的box元素保存到dragBox变量中。
当box元素拖拽到其他元素上时，阻止默认行为。
当box元素被拖放时，如果当前拖拽的box元素不等于目标元素，则交换两个box元素的位置。使用insertBefore方法将dragBox插入到box元素前或后，具体位置根据它们在容器中的位置决定。

我们读懂后，整改下

```html
<!DOCTYPE html>
<html>
<head>
  <title>drag room</title>
</head>
<body>
<div class="container">
  <div class="box" draggable="true">111</div>
  <div class="box" draggable="true">2222</div>
  <div class="box" draggable="true">3333</div>
</div>

  <script>
   
const boxes = document.querySelectorAll('.box');
let dragBox = null;

boxes.forEach(box => {
  box.addEventListener('dragstart', () => {
    dragBox = box;
  });

  box.addEventListener('dragover', e => {
    e.preventDefault();
  });

  box.addEventListener('drop', () => {
    if (dragBox !== box) {
      const dragBoxIndex = Array.from(boxes).indexOf(dragBox);
	  console.log("dragboxindex is :" , dragBoxIndex);
      const boxIndex = Array.from(boxes).indexOf(box);
	  console.log("boxIndex is :" , boxIndex);
	  var dragBoxNext= dragBox.nextSibling;
	  var boxNext = box.nextSibling;
	  box.parentNode.insertBefore(dragBox, boxNext);
	  box.parentNode.insertBefore(box, dragBoxNext);
  //    if (dragBoxIndex < boxIndex) {
  //      box.parentNode.insertBefore(dragBox, box.nextSibling);
   //   } else {
   //     box.parentNode.insertBefore(dragBox, box);
   //   }
	  
    }
  });
});
  </script>
  <style>
   .container {
  display: flex;
  justify-content: center;
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 10px;
}
  </style>
</body>
</html>

解决

  const dragItem = document.getElementById("playBox" + dragIndex) as HTMLElement;
        const targetItem = document.getElementById("playBox" + index) as HTMLElement;
        const dragBoxNext= dragItem.nextSibling;
	      var boxNext = targetItem.nextSibling;
        if(targetItem.parentNode){
	      targetItem.parentNode.insertBefore(dragItem, boxNext);
	      targetItem.parentNode.insertBefore(targetItem, dragBoxNext);
        }

业务代码变更