element-ui设置多个input框之前通过按住拖拽换位置

Question

这是用element-ui搭建的，怎么实现按住移动，让它上下移动，移动到上面对应的input的框，与移动的相互换位置

Answer 1

• 你可以看下这个问题的回答https://ask.csdn.net/questions/7440004
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：【element-ui笔记】element-ui中的input实现模糊搜索
• 除此之外, 这篇博客: Element-Ui input只允许输入数字和两位小数中的 注意 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 经测试，该方法存在一个比较隐秘的bug，在中文输入法状态下，输入文字，点击空格键强制插入文字，input框为空，但此时再输入数字时，提示“不能为空，不能删除”，优化方法如“方法二”

• 以下回答由chatgpt基于相关博客总结生成:

  问题是如何使用Element UI实现拖拽交换多个输入框的位置。以下是一个可能的解决方案：

  1. 首先，你可以使用Element UI的拖拽组件（el-draggable）来实现拖拽功能。在你的表单页面中，添加一个el-draggable组件，并绑定一个包含所有输入框的数组。

  <template>
    <div>
      <el-draggable v-model="inputList">
        <el-input v-for="input in inputList" :key="input.key"></el-input>
      </el-draggable>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        inputList: [
          { key: 1, value: '' },
          { key: 2, value: '' },
          // 其他输入框...
        ]
      }
    }
  }
  </script>
  

  1. 接下来，在el-draggable组件上添加一个事件监听器，以便在拖动完成后触发一个方法。

  <template>
    <div>
      <el-draggable v-model="inputList" @end="handleDragEnd">
        <el-input v-for="input in inputList" :key="input.key"></el-input>
      </el-draggable>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        inputList: [
          { key: 1, value: '' },
          { key: 2, value: '' },
          // 其他输入框...
        ]
      }
    },
    methods: {
      handleDragEnd() {
        // 在这里处理拖拽完成后的逻辑
      }
    }
  }
  </script>
  

  1. 在handleDragEnd方法中，你可以根据拖拽的起始位置和目标位置来交换输入框的位置。请注意，每个输入框对象（例如 { key: 1, value: '' }）应该有一个唯一的键（例如 key），以便在交换位置时确定它们。

  <template>
    <div>
      <el-draggable v-model="inputList" @end="handleDragEnd">
        <el-input v-for="input in inputList" :key="input.key"></el-input>
      </el-draggable>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        inputList: [
          { key: 1, value: '' },
          { key: 2, value: '' },
          // 其他输入框...
        ]
      }
    },
    methods: {
      handleDragEnd() {
        // 获取拖拽后的输入框顺序
        const newInputList = this.inputList.map((input, index) => {
          input.order = index + 1;
          return input;
        });
  
        // 根据输入框的order属性排序
        newInputList.sort((a, b) => a.order - b.order);
  
        // 更新输入框列表
        this.inputList = newInputList;
      }
    }
  }
  </script>
  

  通过这个解决方案，你可以实现拖拽交换多个输入框的位置。当你拖拽一个输入框并将其放在另一个输入框的上方时，它们的位置将会交换。请确保在你的表单页面中正确引入Element UI库和相关组件。如果出现问题，请参考Element UI文档或查找相关解决方案。