实现vue-drag-resize拖动Input框，Input可拖动可输入内容，点击Input框内容不清空

首先需要安装vue-drag-resize插件，然后在组件中引入并注册该插件。

在模板中，可以使用v-draggable和v-resizable指令来实现拖动和调整大小的功能。同时，需要将Input框的value绑定到data中的一个变量，这样在拖动或调整大小后，输入框的值也会随之改变。

为了实现点击Input框内容不清空的功能，可以在Input的focus事件中将输入框的值备份到另一个变量中，在blur事件中再将备份的值赋回到输入框中。

完整代码如下：

<template>
  <div class="container">
    <div class="input-box"
         v-draggable
         v-resizable
         :style="{ top: top + 'px', left: left + 'px', width: width + 'px', height: height + 'px' }">
      <input type="text"
             v-model="inputValue"
             @focus="backupValue"
             @blur="restoreValue">
    </div>
  </div>
</template>

<script>
import VueDragResize from 'vue-drag-resize';

export default {
  name: 'DraggableInput',
  components: {
    VueDragResize,
  },
  data() {
    return {
      top: 100,
      left: 100,
      width: 200,
      height: 50,
      inputValue: '',
      inputBackup: '',
    };
  },
  methods: {
    backupValue() {
      this.inputBackup = this.inputValue;
    },
    restoreValue() {
      this.inputValue = this.inputBackup;
    },
  },
};
</script>

<style>
.container {
  position: relative;
  height: 500px;
  background-color: #eee;
}

.input-box {
  position: absolute;
  background-color: #fff;
  border: 1px solid #666;
}

.input-box input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  padding: 5px;
}
</style>