html5拖放(drag)

demo效果：查看在线demo

完整代码（vue版）：
ps：原生js的话将@drag="drag"改为οndrag="drag(event)"就可以啦

<template>
  <div>
    <div class="container">
      <div class="left">
        left
        <div class="drag" draggable="true" @drag="drag" />
      </div>
      <div class="right">right</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  mounted() {},
  methods: {
    drag(e, item, key) {
      const left = document.getElementsByClassName("left")[0];
      if (e.pageX > 100 && e.pageX < 300) {
        left.style.width = e.pageX + "px";
      }
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 500px;
  min-width: 500px;
  overflow: scroll;
}
.left,
.right {
  border: 1px solid #ccc;
  font-size: 22px;
  color: #333;
  font-weight: bold;
  text-align: center;
  line-height: 500px;
}
.right {
  border-left: 0 none;
}
/*my*/
.container {
  display: flex;
}
.left {
  width: 100px;
  position: relative;
  min-width: 100px;
  max-width: 300px;
}
.right {
  flex: 1;
}
.drag {
  display: block;
  position: absolute;
  top: 0;
  right: -5px;
  width: 10px;
  /*right: 0;*//*下面效果一样，上面的话是增加了可选区域范围，使用上好拖一点*/
  /*width: 1px;*/
  opacity: 0;
  height: 100%;
}
.drag:hover {
  cursor: move;
}
</style>

某大厂笔试题，就当是一场梦，醒了很久还是很感动。