vue2拖拉拽做个模拟公式工具

原创

已于 2025-04-08 00:43:26 修改 · 655 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#自由拖拉拽做运算 #vue2使用drag #用drag做运算器

于 2025-04-03 17:47:46 首次发布

1. 成图

在这里插入图片描述

2. 介绍

就是简单拖拉拽来做个规则运算器，具体运算规则、校验规则自己加。

3. 代码

HTML代码

<template>

    <div class="red-cont">
      <div class="red-top">
        <div
          class="red-top-left"
        >
          <div class="red-showarea">
            <div class="red-showarea-title">公式展示</div>
            <div class="red-showarea-list">
              <span
                v-for="(item, index) in valueList"
                :key="index"
              >{
  
  { item.label }}</span>
            </div>
          </div>
          <div class="red-ctrlarea  user-no-select">
            <div class="red-ctrlarea-title">公式编辑</div>
            <div
              class="red-ctrlarea-list"
              @drop="handleDrop"
              @dragleave="handleDragLeave($event)"
              @dragover.stop.prevent="handleDragOver($event)"
            >
              <div v-if="valueList.length === 0" class="red-ctrlarea-hint">
                请拖曳字段、数字或操作符到编辑区域
              </div>
              <div
                v-for="(item, index) in valueList"
                :key="item.id"
                :class="[
                  'red-ctrl-item',
                  index === draggingOverIndex - 1 ? 'red-ctrl-inject-before' : '',
                  index === draggingOverIndex ? 'red-ctrl-inject-after' : ''
                ]"
                @drop.stop.prevent="handleDrop"
                @dragover.stop.prevent="handleDragOver($event, index)"
              >
                <div
                  class="red-ctrl-item-cont"
                  draggable="true"
                  @dragstart="handleDragStart($event, item, item.type)"
                >
                  <div :alt="item.label">{
  
  { item.label }}</div>
                  <i
                    class="el-icon-circle-close red-ctrl-item-close"
                    @click="removeValueItem(item, index)"
                  />
                </div>

              </div>
            </div>
          </div>
        </div>
        <div cla