多个div，每个div里有两个input，实现div可以上下拖拽，两个div换位置

你可以使用HTML5的拖放API来实现这个功能。首先，给每个div添加一个`draggable="true"`属性，使其可拖动。然后，监听`dragstart`事件和`dragover`事件，分别对被拖动的元素和目标元素进行处理。

以下是一个示例代码：

HTML:

<div class="drag-container">
  <div class="drag-item" draggable="true">
    <input type="text" placeholder="input 1">
    <input type="text" placeholder="input 2">
  </div>
  <div class="drag-item" draggable="true">
    <input type="text" placeholder="input 1">
    <input type="text" placeholder="input 2">
  </div>
  <div class="drag-item" draggable="true">
    <input type="text" placeholder="input 1">
    <input type="text" placeholder="input 2">
  </div>
</div>

CSS:

.drag-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.drag-item {
  width: calc(33.33% - 10px);
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  box-sizing: border-box;
}

JavaScript:

const dragItems = document.querySelectorAll('.drag-item');
let dragItem = null;

// 监听dragstart事件，记录被拖动的元素
dragItems.forEach(item => {
  item.addEventListener('dragstart', e => {
    dragItem = e.target;
    setTimeout(() => {
      e.target.classList.add('hide');
    }, 0);
  });
});

// 监听dragover事件，处理拖动过程中的交换位置
dragItems.forEach(item => {
  item.addEventListener('dragover', e => {
    e.preventDefault();
    if (dragItem !== null && dragItem !== item) {
      const dropZone = e.target.closest('.drag-item');
      if (dropZone) {
        const bounding = dropZone.getBoundingClientRect();
        const offset = bounding.y + (bounding.height / 2);
        if (e.clientY - offset > 0) {
          dropZone.after(dragItem);
        } else {
          dropZone.before(dragItem);
        }
      }
    }
  });
});

// 监听dragend事件，重置被拖动的元素的样式
document.addEventListener('dragend', e => {
  dragItems.forEach(item => item.classList.remove('hide'));
  dragItem = null;
});

以上代码实现了拖动div和拖动input的区别。如果你想让div中的两个input也可以拖动，可以给它们分别添加`draggable="true"`属性，并在`dragstart`和`dragover`事件中处理它们的位置关系。