手写 拖拽 修改参数

复制代码
<template>
  <div style="display: flex; justify-content: space-between; height: 100vh;">
    <div>
      模型
      <div
        class="moxing"
        draggable="true"
        id="moxingElement"
        @dragstart="onDragStart($event)"
      >
        西周
      </div>
    </div>

    <div class="huabu" @dragover.prevent @drop="onDrop" ref="canvas">
      画布
    </div>

    <div class="canshu">
      参数
      <div>
        宽度:<input type="text" v-model.number="width" />
        高度:<input type="text" v-model.number="height" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      width: 200,  // 初始宽度
      height: 200, // 初始高度
    };
  },
  methods: {
    onDragStart(event) {
      const draggableElement = event.target;
      event.dataTransfer.setData('text/plain', draggableElement.id);
    },

    onDrop(event) {
      const elementId = event.dataTransfer.getData('text/plain');
      const draggedElement = document.getElementById(elementId);
      const canvas = this.$refs.canvas;

      if (draggedElement) {
        canvas.innerHTML = ''; // 清空画布内容
        canvas.appendChild(draggedElement); // 将拖动的元素添加到画布

        // 更新样式
        draggedElement.style.width = `${this.width}px`;
        draggedElement.style.height = `${this.height}px`;
      } else {
        console.error('Dragged element not found with ID:', elementId);
      }
    },
  },
};
</script>

<style>
.moxing {
  width: 200px;
  height: 200px;
  background-color: red;
  cursor: move;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white; /* 添加文本颜色以便在红色背景上可见 */
}

.huabu {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0; /* 浅灰色背景以便更好地查看 */
}

.canshu {
  width: 300px; /* 调整宽度以适应参数输入 */
  height: 500px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
相关推荐
quan263110 分钟前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
GIS之路10 分钟前
GDAL 读取影像元数据
前端
qb1 小时前
vue3.5.18源码-编译-入口
前端·vue.js·架构
小桥风满袖1 小时前
极简三分钟ES6 - 类与继承
前端·javascript
虫无涯1 小时前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器
子兮曰1 小时前
🚀99% 的前端把 reduce 用成了「高级 for 循环」—— 这 20 个骚操作让你一次看懂真正的「函数式折叠」
前端·javascript·typescript
wifi歪f1 小时前
📦 qiankun微前端接入实战
前端·javascript·面试
小桥风满袖1 小时前
极简三分钟ES6 - Symbol
前端·javascript
子兮曰1 小时前
🚀Map的20个神操作,90%的开发者浪费了它的潜力!最后的致命缺陷让你少熬3天夜!
前端·javascript·ecmascript 6
NewChapter °1 小时前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app