vue中使用html5的drag实现任意位置拖动

最新推荐文章于 2024-06-17 14:01:15 发布
最新推荐文章于 2024-06-17 14:01:15 发布
阅读量2.3k 收藏 8
点赞数 2
分类专栏： drag拖拽 文章标签： vue html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44696379/article/details/119889874
版权

最近做的一个项目，需要拖动配置，网上找了一圈 没找到合适的轮子，没办法自己写吧，代码中有能优化的地方，没时间优化了（其实就是懒得），希望能帮到需要的人。

效果图如下：

  1. 可以充设备组件拖动到右侧容器中，设备组件栏中对应删除拖出去的数据，右侧容器则添加对应数据，反之亦然（从右侧拖动设备组件放回左侧设备组件栏时也是删除右侧拖出数据，设备栏添加相关数据）
  2. 环境组件栏：拖动组件到右侧容器，组件栏数据保持原样，右侧容器添加对应拖动数据。从右侧容器拖动环境组件放回组件栏，容器删除对应数据，环境组件栏保持原样
  3. 右侧容器中的任何组件都可以随意拖动位置

没有动图，只有png

数据结构

"data": {
  "orgOuterId": "13",
  "orgName": "星座设备健康管理有限公司",
  "bigScreenTitle": "工业设备监测云平台",
  "workshop": [{
      "workshopId": "1000047",
      "name": "上海一区",
      "position": "东方一角",
      "manager": "张阳阳",
      "bgPic": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/199e4f0fcd76710c487f8e8e5c5a11b4.jpg",
      "envLayout": [{
          "envComponentId": "3",
          "name": "墙类",
          "iconId": "10005",
          "iconSubId": "10006",
          "subIcons": [{
              "iconId": "10005",
              "name": "墙",
              "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1628841770502_3fz6umsn53.png",
              "width": "252",
              "height": "188",
              "type": "2",
              "extra": {
                "x": 0,
                "y": 0
              },
              "pid": "0"
            },
            {
              "iconId": "10006",
              "name": "左墙",
              "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771432169_m8kxa0lwu2.png",
              "width": "126",
              "height": "94",
              "type": "2",
              "extra": {
                "x": 0,
                "y": 0
              },
              "pid": "10005"
            },
            {
              "iconId": "10007",
              "name": "右墙",
              "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771442722_j7g6ko6xg3.png",
              "width": "126",
              "height": "94",
              "type": "2",
              "extra": {
                "x": 0,
                "y": 0
              },
              "pid": "10005"
            }
          ],
          "icon": {
            "iconId": "10006",
            "name": "左墙",
            "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771432169_m8kxa0lwu2.png",
            "width": "126",
            "height": "94",
            "type": "2",
            "extra": {
              "x": 0,
              "y": 0
            },
            "pid": "10005"
          },
          "randomId": "162978737079900",
          "type": "env",
          "position": {
            "l": 161,
            "left": 0,
            "z": 54,
            "t": 121
          }
        },
        {
          "envComponentId": "4",
          "name": "测试2",
          "iconId": "10022",
          "iconSubId": "10022",
          "subIcons": [{
              "iconId": "10022",
              "name": "父图",
              "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686574303_uq3ehbd2q.png",
              "width": "126",
              "height": "94",
              "type": "1",
              "extra": {
                "x": 0,
                "y": 0
              },
              "pid": "0"
            },
            {
              "iconId": "10024",
              "name": "子",
              "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686634420_6eqq6rpitk.png",
              "width": "126",
              "height": "94",
              "type": "1",
              "extra": {
                "x": 0,
                "y": 0
              },
              "pid": "10022"
            }
          ],
          "icon": {
            "iconId": "10022",
            "name": "父图",
            "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686574303_uq3ehbd2q.png",
            "width": "126",
            "height": "94",
            "type": "1",
            "extra": {
              "x": 0,
              "y": 0
            },
            "pid": "0"
          },
          "randomId": "162978737079901",
          "type": "env",
          "position": {
            "l": 380,
            "left": 0,
            "z": 54,
            "t": 233
          }
        },
        {
          "envComponentId": "4",
          "name": "测试2",
          "iconId": "10022",
          "iconSubId": "10024",
          "subIcons": [{
              "iconId": "10022",
              "name": "父图",
              "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686574303_uq3ehbd2q.png",
              "width": "126",
              "height": "94",
              "type": "1",
              "extra": {
                "x": 0,
                "y": 0
              },
              "pid": "0"
            },
            {
              "iconId": "10024",
              "name": "子",
              "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686634420_6eqq6rpitk.png",
              "width": "126",
              "height": "94",
              "type": "1",
              "extra": {
                "x": 0,
                "y": 0
              },
              "pid": "10022"
            }
          ],
          "icon": {
            "iconId": "10024",
            "name": "子",
            "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686634420_6eqq6rpitk.png",
            "width": "126",
            "height": "94",
            "type": "1",
            "extra": {
              "x": 0,
              "y": 0
            },
            "pid": "10022"
          },
          "randomId": "162978737079902",
          "type": "env",
          "position": {
            "l": 548,
            "left": 0,
            "z": 54,
            "t": 93
          }
        },
        {
          "envComponentId": "4",
          "name": "测试2",
          "iconId": "10022",
          "iconSubId": "10022",
          "subIcons": [{
              "iconId": "10022",
              "name": "父图",
              "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686574303_uq3ehbd2q.png",
              "width": "126",
              "height": "94",
              "type": "1",
              "extra": {
                "x": 0,
                "y": 0
              },
              "pid": "0"
            },
            {
              "iconId": "10024",
              "name": "子",
              "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686634420_6eqq6rpitk.png",
              "width": "126",
              "height": "94",
              "type": "1",
              "extra": {
                "x": 0,
                "y": 0
              },
              "pid": "10022"
            }
          ],
          "icon": {
            "iconId": "10022",
            "name": "父图",
            "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686574303_uq3ehbd2q.png",
            "width": "126",
            "height": "94",
            "type": "1",
            "extra": {
              "x": 0,
              "y": 0
            },
            "pid": "0"
          },
          "randomId": "162978737079903",
          "type": "env",
          "position": {
            "l": 70,
            "left": 0,
            "z": 55,
            "t": 237
          }
        }
      ],
      "devices": [{
        "deviceUUID": "581248563706978304",
        "deviceName": "四轴机器人",
        "workshopId": "1000047",
        "position": {
          "iconSubId": "10",
          "l": 347,
          "t": 135,
          "z": 54
        },
        "iconId": "10",
        "iconSubId": "10",
        "icon": {
          "iconId": "10",
          "name": "机床",
          "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629252429605_g7650z9j6o.png",
          "width": "135",
          "height": "131",
          "type": "2",
          "extra": {
            "x": 0,
            "y": 0
          },
          "pid": "0"
        }
      }]
    },
    {
      "workshopId": "1000121",
      "name": "海淀",
      "position": "万柳",
      "manager": "李丰台",
      "bgPic": "",
      "envLayout": [],
      "devices": []
    },
    {
      "workshopId": "1000135",
      "name": "上海2区",
      "position": "东方2角",
      "manager": "张2阳",
      "bgPic": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/199e4f0fcd76710c487f8e8e5c5a11b4.jpg",
      "envLayout": [{
          "envComponentId": 3,
          "iconId": 10005,
          "iconSubId": "10007",
          "position": {
            "w": 0,
            "t": 17,
            "z": 32,
            "l": 499
          },
          "icon": {
            "iconId": "10007",
            "name": "右墙",
            "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771442722_j7g6ko6xg3.png",
            "width": "126",
            "height": "94",
            "type": "2",
            "extra": {
              "x": 0,
              "y": 0
            },
            "pid": "10005"
          },
          "subIcons": [{
              "iconId": "10005",
              "name": "墙",
              "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1628841770502_3fz6umsn53.png",
              "width": "252",
              "height": "188",
              "type": "2",
              "extra": {
                "x": 0,
                "y": 0
              },
              "pid": "0"
            },
            {
              "iconId": "10006",
              "name": "左墙",
              "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771432169_m8kxa0lwu2.png",
              "width": "126",
              "height": "94",
              "type": "2",
              "extra": {
                "x": 0,
                "y": 0
              },
              "pid": "10005"
            },
            {
              "iconId": "10007",
              "name": "右墙",
              "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771442722_j7g6ko6xg3.png",
              "width": "126",
              "height": "94",
              "type": "2",
              "extra": {
                "x": 0,
                "y": 0
              },
              "pid": "10005"
            }
          ],
          "randomId": 1629775200460,
          "type": "env"
        },
        {
          "envComponentId": 3,
          "iconId": 10005,
          "iconSubId": "10007",
          "position": {
            "w": 0,
            "t": 22,
            "z": 33,
            "l": 257
          },
          "icon": {
            "iconId": "10007",
            "name": "右墙",
            "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771442722_j7g6ko6xg3.png",
            "width": "126",
            "height": "94",
            "type": "2",
            "extra": {
              "x": 0,
              "y": 0
            },
            "pid": "10005"
          },
          "subIcons": [{
              "iconId": "10005",
              "name": "墙",
              "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1628841770502_3fz6umsn53.png",
              "width": "252",
              "height": "188",
              "type": "2",
              "extra": {
                "x": 0,
                "y": 0
              },
              "pid": "0"
            },
            {
              "iconId": "10006",
              "name": "左墙",
              "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771432169_m8kxa0lwu2.png",
              "width": "126",
              "height": "94",
              "type": "2",
              "extra": {
                "x": 0,
                "y": 0
              },
              "pid": "10005"
            },
            {
              "iconId": "10007",
              "name": "右墙",
              "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771442722_j7g6ko6xg3.png",
              "width": "126",
              "height": "94",
              "type": "2",
              "extra": {
                "x": 0,
                "y": 0
              },
              "pid": "10005"
            }
          ],
          "randomId": 1629775200461,
          "type": "env"
        }
      ],
      "devices": [{
        "deviceUUID": "577988705557798912",
        "deviceName": "六轴机器人",
        "workshopId": "1000135",
        "position": {
          "iconSubId": "10",
          "l": 86.10189573459715,
          "t": 74.08767772511848,
          "z": 25
        },
        "iconId": "10",
        "iconSubId": "10",
        "icon": {
          "iconId": "10",
          "name": "机床",
          "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629252429605_g7650z9j6o.png",
          "width": "135",
          "height": "131",
          "type": "2",
          "extra": {
            "x": 0,
            "y": 0
          },
          "pid": "0"
        }
      }]
    },
    {
      "workshopId": "1000136",
      "name": "阿萨的",
      "position": "啊",
      "manager": "啊",
      "bgPic": "",
      "envLayout": [{
          "envComponentId": "4",
          "name": "测试2",
          "iconId": "10022",
          "iconSubId": "10022",
          "subIcons": [{
              "iconId": "10022",
              "name": "父图",
              "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686574303_uq3ehbd2q.png",
              "width": "126",
              "height": "94",
              "type": "1",
              "extra": {
                "x": 0,
                "y": 0
              },
              "pid": "0"
            },
            {
              "iconId": "10024",
              "name": "子",
              "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686634420_6eqq6rpitk.png",
              "width": "126",
              "height": "94",
              "type": "1",
              "extra": {
                "x": 0,
                "y": 0
              },
              "pid": "10022"
            }
          ],
          "icon": {
            "iconId": "10022",
            "name": "父图",
            "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686574303_uq3ehbd2q.png",
            "width": "126",
            "height": "94",
            "type": "1",
            "extra": {
              "x": 0,
              "y": 0
            },
            "pid": "0"
          },
          "randomId": "162977737390130",
          "type": "env",
          "position": {
            "l": 149,
            "left": 0,
            "z": 55,
            "t": 141
          }
        },
        {
          "envComponentId": "3",
          "name": "墙类",
          "iconId": "10005",
          "iconSubId": "10005",
          "subIcons": [{
              "iconId": "10005",
              "name": "墙",
              "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1628841770502_3fz6umsn53.png",
              "width": "252",
              "height": "188",
              "type": "2",
              "extra": {
                "x": 0,
                "y": 0
              },
              "pid": "0"
            },
            {
              "iconId": "10006",
              "name": "左墙",
              "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771432169_m8kxa0lwu2.png",
              "width": "126",
              "height": "94",
              "type": "2",
              "extra": {
                "x": 0,
                "y": 0
              },
              "pid": "10005"
            },
            {
              "iconId": "10007",
              "name": "右墙",
              "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771442722_j7g6ko6xg3.png",
              "width": "126",
              "height": "94",
              "type": "2",
              "extra": {
                "x": 0,
                "y": 0
              },
              "pid": "10005"
            }
          ],
          "icon": {
            "iconId": "10005",
            "name": "墙",
            "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1628841770502_3fz6umsn53.png",
            "width": "252",
            "height": "188",
            "type": "2",
            "extra": {
              "x": 0,
              "y": 0
            },
            "pid": "0"
          },
          "randomId": 1629777377747,
          "type": "env",
          "position": {
            "l": 393,
            "left": 0,
            "z": 54,
            "t": 264
          }
        }
      ],
      "devices": []
    }
  ],
  "otherDevices": [],
  "envComponents": [{
      "envComponentId": "3",
      "name": "墙类",
      "iconId": "10005",
      "iconSubId": "10005"
    },
    {
      "envComponentId": "4",
      "name": "测试2",
      "iconId": "10022",
      "iconSubId": "10022"
    },
    {
      "envComponentId": "5",
      "name": "轨道",
      "iconId": "11",
      "iconSubId": "11"
    }
  ],
  "iconsGroup": {
    "10": {
      "10": {
        "iconId": "10",
        "name": "机床",
        "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629252429605_g7650z9j6o.png",
        "width": "135",
        "height": "131",
        "type": "2",
        "extra": {
          "x": 0,
          "y": 0
        },
        "pid": "0"
      }
    },
    "11": {
      "11": {
        "iconId": "11",
        "name": "传感器",
        "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629252414513_fe4coz4kf.png",
        "width": "135",
        "height": "131",
        "type": "2",
        "extra": {
          "x": 0,
          "y": 0
        },
        "pid": "0"
      }
    },
    "10000": {
      "10000": {
        "iconId": "10000",
        "name": "设备默认图标",
        "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1628841770502_3fz6umsn53.png",
        "width": "252",
        "height": "188",
        "type": "2",
        "extra": {
          "x": 0,
          "y": 0
        },
        "pid": "0"
      },
      "10001": {
        "iconId": "10001",
        "name": "左设备默认图标",
        "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1628841770502_3fz6umsn53.png",
        "width": "252",
        "height": "188",
        "type": "2",
        "extra": {
          "x": 0,
          "y": 0
        },
        "pid": "10000"
      },
      "10002": {
        "iconId": "10002",
        "name": "右设备默认图标",
        "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1628841770502_3fz6umsn53.png",
        "width": "252",
        "height": "188",
        "type": "2",
        "extra": {
          "x": 0,
          "y": 0
        },
        "pid": "10000"
      }
    },
    "10005": {
      "10005": {
        "iconId": "10005",
        "name": "墙",
        "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1628841770502_3fz6umsn53.png",
        "width": "252",
        "height": "188",
        "type": "2",
        "extra": {
          "x": 0,
          "y": 0
        },
        "pid": "0"
      },
      "10006": {
        "iconId": "10006",
        "name": "左墙",
        "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771432169_m8kxa0lwu2.png",
        "width": "126",
        "height": "94",
        "type": "2",
        "extra": {
          "x": 0,
          "y": 0
        },
        "pid": "10005"
      },
      "10007": {
        "iconId": "10007",
        "name": "右墙",
        "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771442722_j7g6ko6xg3.png",
        "width": "126",
        "height": "94",
        "type": "2",
        "extra": {
          "x": 0,
          "y": 0
        },
        "pid": "10005"
      }
    },
    "10022": {
      "10022": {
        "iconId": "10022",
        "name": "父图",
        "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686574303_uq3ehbd2q.png",
        "width": "126",
        "height": "94",
        "type": "1",
        "extra": {
          "x": 0,
          "y": 0
        },
        "pid": "0"
      },
      "10024": {
        "iconId": "10024",
        "name": "子",
        "img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686634420_6eqq6rpitk.png",
        "width": "126",
        "height": "94",
        "type": "1",
        "extra": {
          "x": 0,
          "y": 0
        },
        "pid": "10022"
      }
    }
  }
},
"code": 200,
"message": "OK",
"requestId": "b0fe622fa9ac21f7e3339ef2ef77a56e",
"takeTime": "47.622 ms",
"serverTime": "2021-08-24 14:46:35"

页面代码

<template>
  <div class="my-container">
    <div class="top">
      <div>
        <span class="icon-back" @click="goBack"><i class="el-icon-arrow-left back" /></span>
        <span class="name">{{ orgName }}</span>
      </div>
      <div>
        <el-button size="small" @click="look">预览</el-button>
        <el-button type="primary" size="small" :loading="loading" @click="publush">{{ loading ? '发布中...' : '发布' }}</el-button>
      </div>
    </div>
    <div class="content">
      <div>
        <div class="right">
          <div class="title">设备组件（共{{ otherDevices.length }}台）</div>
          <div v-loading="loading" class="cont" @drop="dropCur($event)" @dragover="allowDropCur($event)" @dragleave="ondragleave">
            <div v-for="item in otherDevices" :id="item.deviceUUID" :key="item.deviceUUID" class="item" draggable="true" @dragstart="drag($event, item.deviceUUID, item, true)">
              <img class="img" :src="item.icon.img">
              <span>{{ item.deviceName }}</span>
            </div>
          </div>
        </div>
        <div class="env-cont">
          <div class="title">环境组件</div>
          <div v-loading="loading" class="cont" @drop="dropEnv($event)" @dragover="allowDropEnv($event)" @dragleave="ondragleave">
            <div v-for="(item, index) in envComponents" :id="item.randomId + index" :key="item.randomId" class="item" draggable="true" @dragstart="dragEnvOrigin($event, item.randomId + index, item, true)">
              <img class="img" :src="item.icon.img">
              <span>{{ item.icon.name }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="drag-cont">
        <div class="screen-cont">
          <span>大屏标题：</span>
          <el-input v-model="bigScreenTitle" maxlength="9" style="width: 180px" />
          <el-button :loading="inputLoading" type="primary" size="small" style="margin-left: 10px" @click="changeName">保存</el-button>
        </div>
        <el-tabs id="tabs" v-model="activeName" type="border-card" addable @tab-add="add">
          <template v-for="(item, index) in workshop">
            <el-tab-pane v-if="item.action !== 'delete'" :key="index" :name="index.toString()">
              <span slot="label">
                {{ item.name }}
                <span class="tab-action-cont" @click="editCj(item.name, item.isNew || false, index)"><i class="el-icon-edit" /></span>
              </span>
              <div :ref="activeName" v-loading="loading" class="bg-cont" :style="{ height: divHeight + 'px' }" @drop="drop($event)" @dragover="allowDrop($event)" @dragleave="ondragleave">
                <div
                  v-for="(child, idx) in item.devices"
                  :id="child.deviceUUID"
                  :key="child.deviceUUID"
                  draggable="true"
                  class="right-img-cont"
                  :style="{
                    width: child.icon.width / child.icon.type + 'px',
                    height: child.icon.height / child.icon.type + 'px',
                    left: child.position.l + 'px',
                    top: child.position.t + 'px',
                    'z-index': child.position.z,
                    background: `url('${child.icon.img}') 100% 100%`
                  }"
                  @dragstart="drag($event, child.deviceUUID, child, false, idx)"
                >
                  <!-- <img
                    :src="child.icon.img"
                    class="imgcur"
                  > -->
                  <div v-if="child.subIcons && child.subIcons.length > 1" class="refresh-cont">
                    <i class="el-icon-refresh" @click="changeImg(child, child.iconSubId, idx)" />
                  </div>
                </div>
                <div
                  v-for="(child, idx) in item.envLayout"
                  :id="child.randomId"
                  :key="child.randomId"
                  draggable="true"
                  class="right-img-cont"
                  :style="{
                    width: child.icon.width / child.icon.type + 'px',
                    height: child.icon.height / child.icon.type + 'px',
                    left: child.position.l + 'px',
                    top: child.position.t + 'px',
                    'z-index': child.position.z,
                    background: `url('${child.icon.img}') 100% 100%`
                  }"
                  @dragstart="dragEnv($event, child.randomId, child, false, idx)"
                >
                  <div v-if="child.subIcons && child.subIcons.length > 1" class="refresh-cont">
                    <i class="el-icon-refresh" @click="changeEnvImg(child, child.iconSubId, idx)" />
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </template>
        </el-tabs>
      </div>
    </div>
    <!-- 效果预览 -->
    <el-dialog
      title="查看效果图"
      width="845px"
      custom-class="pt-preview"
      :visible.sync="dialogVisible"
    >
      <div v-loading="dialogLoading" class="preview">
        <el-tabs type="border-card">
          <template v-for="(item, index) in previewWorkshop">
            <el-tab-pane v-if="item.action !== 'delete'" :key="index" :name="index.toString()">
              <span slot="label">
                {{ item.name }}
              </span>
              <div class="bg-cont" :style="{ height: divHeight + 'px' }">
                <img
                  v-for="child in item.devices"
                  :key="child.deviceUUID"
                  :src="child.icon.img"
                  class="imgcur"
                  draggable="true"
                  :style="{
                    width: child.icon.width / child.icon.type + 'px',
                    height: child.icon.height / child.icon.type + 'px',
                    left: child.position.l + 'px',
                    top: child.position.t + 'px',
                    'z-index': child.position.z
                  }"
                >
                <img
                  v-for="child in item.envLayout"
                  :key="child.randomId"
                  :src="child.icon.img"
                  class="imgcur"
                  draggable="true"
                  :style="{
                    width: child.icon.width / child.icon.type + 'px',
                    height: child.icon.height / child.icon.type + 'px',
                    left: child.position.l + 'px',
                    top: child.position.t + 'px',
                    'z-index': child.position.z
                  }"
                >
              </div>
            </el-tab-pane>
          </template>
        </el-tabs>
      </div>
    </el-dialog>
    <!-- 编辑/新建 车间 -->
    <el-dialog
      :title="isAdd ? '新建车间' : '编辑车间'"
      :visible.sync="addEditVisible"
      width="420px"
      @close="infoClose"
    >
      <el-form
        ref="infoForm"
        label-position="left"
        :model="infoForm"
        label-width="110px"
        :rules="infoRules"
        class="add-cont"
      >
        <el-form-item label="所属公司：">
          <span>{{ orgName }}</span>
        </el-form-item>
        <el-form-item label="车间名称：" prop="name">
          <el-input
            v-model.trim="infoForm.name"
            placeholder="请输入车间名称"
            style="width: 100%;"
          />
        </el-form-item>
        <el-form-item label="车间位置：" prop="position">
          <el-input
            v-model.trim="infoForm.position"
            placeholder="请输入车间位置"
            style="width: 100%;"
          />
        </el-form-item>
        <el-form-item label="负责人：" prop="manager">
          <el-input
            v-model.trim="infoForm.manager"
            placeholder="请输入负责人"
            style="width: 100%;"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="!isAdd && canDelete" type="danger" plain @click="delCj">删除车间</el-button>
        <el-button type="primary" :loading="btnLoading" @click="addSubmit">{{ btnLoading ? '保存中' : '保 存' }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { workshopLayout, workshopInfo, orgEdit } from '@/api/iot'
export default {
  name: 'Peitu',
  data() {
    return {
      halfWidth: '',
      halfHeight: '',
      basicWidth: 845,
      basicHeight: 468,
      basicPerW: '',
      basicPerH: '',
      percent: 845 / 468,
      orgName: '',
      orgOuterId: '',
      zIndex: 0,
      tagIndex: '',
      first: true,
      activeName: '0',
      isEnv: false,
      inputLoading: false,
      dialogVisible: false,
      dialogLoading: false,
      loading: false,
      bigScreenTitle: '工业设备监测云平台',
      // 新建、编辑
      canDelete: false,
      infoForm: {
        name: '',
        position: '',
        manager: ''
      },
      infoRules: {
        name: [
          { required: true, message: '请输入车间名称', trigger: 'blur' }
        ],
      },
      workshopIndex: 0,
      addEditVisible: false,
      btnLoading: false,
      isAdd: true,
      timeOut: '',
      moveX: '',
      moveY: '',
      offsetLeft: '',
      offsetTop: '',
      imgUrl: '',
      dragId: '',
      tempObj: {},
      // 边界处理
      tagWidth: '',
      tagHeight: '',
      divWidth: '',
      divHeight: '',
      workshop: [{
        workshopId: 'new_0',
        name: '车间1',
        action: 'create',
        devices: []
      }],
      otherDevices: [],
      // 预览效果图
      previewWorkshop: [],
      // 环境组件
      envComponents: [],
      iconsGroup: {},
      addEnv: true,
    }
  },
  watch: {
    workshop: {
      handler(val, oldVal) {
        let num = 0
        this.workshop.forEach(item => {
          if (item.action !== 'delete') {
            num++
          }
        })
        this.canDelete = num > 1
      },
      // immediate: true,
      deep: true
    }
  },
  created() {
    this.orgOuterId = this.$route.query.id
    this.getList()
  },
  mounted() {
    // 处理边界
    const elm = document.getElementById('tabs')
    this.divWidth = elm.clientWidth
    this.divHeight = this.divWidth / this.percent
    this.basicPerW = this.divWidth / this.basicWidth
    this.basicPerH = this.divHeight / this.basicHeight

    // 重新计算
    window.onresize = () => {
      this.workshop.forEach(item => {
        item.devices.forEach(child => {
          child.position.l = child.position.l / this.basicPerW
          child.position.t = child.position.t / this.basicPerH
        })
      })
      this.$nextTick(() => {
        this.divWidth = elm.clientWidth
        this.divHeight = this.divWidth / this.percent
        this.basicPerW = this.divWidth / this.basicWidth
        this.basicPerH = this.divHeight / this.basicHeight
        this.workshop.forEach(item => {
          item.devices.forEach(child => {
            child.position.l = child.position.l * this.basicPerW
            child.position.t = child.position.t * this.basicPerH
          })
        })
      })
    }
  },
  methods: {
    changeImg(item, iconSubId, index) {
      this.workshop[this.activeName].action = 'update'
      const num = item.subIcons.length
      let idx = 0
      item.subIcons.map((c, i) => {
        if (c.iconId * 1 === iconSubId * 1) {
          idx = i + 1
        }
      })
      if (idx === num) {
        idx = 0
      }
      this.workshop[this.activeName].devices[index].icon = item.subIcons[idx]
      this.workshop[this.activeName].devices[index].iconSubId = item.subIcons[idx].iconId
    },
    changeEnvImg(item, iconSubId, index) {
      this.workshop[this.activeName].action = 'update'
      const num = item.subIcons.length
      let idx = 0
      item.subIcons.map((c, i) => {
        this.isRefresh = true
        if (c.iconId * 1 === iconSubId * 1) {
          idx = i + 1
        }
      })
      if (idx === num) {
        idx = 0
      }
      this.workshop[this.activeName].envLayout[index].icon = item.subIcons[idx]
      this.workshop[this.activeName].envLayout[index].iconSubId = item.subIcons[idx].iconId
    },
    changeName() {
      this.inputLoading = true
      orgEdit({
        outerId: this.orgOuterId,
        bigScreenTitle: this.bigScreenTitle
      }).then(res => {
        this.$message({
          type: 'success',
          message: '修改成功'
        })
      }).finally(_ => {
        this.inputLoading = false
      })
    },
    goBack() {
      this.$router.back()
    },
    publush() {
      // const hasEmpty = this.workshop.some(item => {
      //   if (item.action !== 'delete') {
      //     return item.devices.length === 0
      //   }
      // })
      // if (hasEmpty) {
      //   this.$message({
      //     message: '车间不能为空，请为车间配置设备',
      //     type: 'warning'
      //   })
      //   return false
      // }
      const tempArry = JSON.parse(JSON.stringify(this.workshop))
      tempArry.forEach(item => {
        item.devices.forEach(child => {
          child.position.l = child.position.l / this.basicPerW
          child.position.t = child.position.t / this.basicPerH
        })
        item.envLayout.forEach(child => {
          child.position.l = child.position.l / this.basicPerW
          child.position.t = child.position.t / this.basicPerH
        })
      })
      const obj = {
        orgOuterId: this.orgOuterId,
        orgName: this.orgName,
        workshop: tempArry,
        otherDevices: this.otherDevices,
      }
      this.loading = true
      workshopLayout({
        ...obj
      }).then(res => {
        this.$message({
          message: '发布成功',
          type: 'success'
        })
        this.getList()
      }).finally(_ => {
        this.loading = false
      })
    },
    getList() {
      this.loading = true
      workshopInfo({
        orgOuterId: this.orgOuterId
      }).then(res => {
        this.bigScreenTitle = res.data.bigScreenTitle
        this.orgName = res.data.orgName
        this.workshop = res.data.workshop
        this.otherDevices = res.data.otherDevices
        this.iconsGroup = res.data.iconsGroup
        this.envComponents = res.data.envComponents
        // 环境组件
        this.workshop.map((item, index) => {
          item.envLayout.map((child, idx) => {
            const tempObj = this.iconsGroup[child.iconId]
            const tempArr = Object.values(tempObj)
            child.subIcons = tempArr
            child.randomId = new Date().getTime() + '' + index + idx
            child.type = 'env'
          })
          item.devices.map(child => {
            const tempObj = this.iconsGroup[child.iconId]
            const tempArr = Object.values(tempObj)
            child.subIcons = tempArr
          })
        })
        this.envComponents.map((item, index) => {
          const tempObj = this.iconsGroup[item.iconId]
          const tempArr = Object.values(tempObj)
          item.subIcons = tempArr
          item.icon = tempObj[item.iconId]
          item.randomId = new Date().getTime() + index
          item.type = 'env'
          item.position = {
            l: 0,
            left: 0,
            z: this.zIndex++
          }
        })
        // // 获取图片宽高
        // const _this = this
        // this.otherDevices.map((item, index) => {
        //   ((index) => {
        //     const img = new Image()
        //     img.src = item.icon.img
        //     img.onload = function() {
        //       _this.otherDevices[index].icon.width = img.width / 2
        //       _this.otherDevices[index].icon.height = img.height / 2
        //     }
        //   })(index)
        // })
        this.workshop.forEach(item => {
          item.action = 'none'
        })
        if (!this.workshop.length) {
          this.workshop = [{
            workshopId: 'new_1',
            isNew: true,
            name: '车间1',
            action: 'create',
            devices: []
          }]
        } else {
          const arr = []
          this.workshop.forEach(item => {
            item.devices.forEach(child => {
              arr.push(child.position.z)
              child.position.l = child.position.l * this.basicPerW
              child.position.t = child.position.t * this.basicPerH
            })
          })
          this.zIndex = arr.length ? Math.max(...arr) : 0
        }
        this.activeName = '0'
      }).finally(_ => {
        this.loading = false
      })
    },
    look() {
      this.dialogVisible = true
      this.previewWorkshop = JSON.parse(JSON.stringify(this.workshop))
    },
    add() {
      this.addEditVisible = true
      this.isAdd = true
    },
    editCj(name, isNew, index) {
      this.infoForm.name = this.workshop[this.activeName].name
      this.infoForm.position = this.workshop[this.activeName].position
      this.infoForm.manager = this.workshop[this.activeName].manager
      this.addEditVisible = true
      this.isAdd = false
      this.isNew = isNew
      this.activeName = index + ''
    },
    infoClose() {
      this.infoForm = {
        name: '',
        position: '',
        manager: ''
      }
      this.$refs.infoForm.clearValidate()
      this.btnLoading = false
    },
    addSubmit() {
      this.$refs.infoForm.validate((valid) => {
        if (valid && this.isAdd) {
          // 新增车间
          const obj = {
            workshopId: 'new_' + (this.activeName * 0 + 1),
            isNew: true,
            // name: this.infoForm.name,
            orgOuterId: this.orgOuterId,
            ...this.infoForm,
            action: 'create',
            devices: [],
            envLayout: []
          }
          this.workshop.push(obj)
          this.activeName = (this.workshop.length - 1).toString()
          this.addEditVisible = false
        } else if (valid && !this.isAdd) {
          // 编辑车间
          this.workshop[this.activeName].name = this.infoForm.name
          this.workshop[this.activeName].position = this.infoForm.position
          this.workshop[this.activeName].manager = this.infoForm.manager
          if (!this.isNew) {
            this.workshop[this.activeName].action = 'update'
          }
          this.addEditVisible = false
        }
      })
    },
    delCj() {
      // if (this.workshop[val].devices.length) {
      //   this.$alert('该车间下存在已配置设备，删除车间前请先移除相关设备', '删除车间', {
      //     type: 'warning',
      //     confirmButtonText: '确定'
      //   });
      // } else {
      this.$confirm('此操作将永久删除该车间, 是否继续?', '删除车间', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.otherDevices = [...this.workshop[this.activeName].devices, ...this.otherDevices]
        if (this.isNew) {
          this.workshop.splice(this.activeName, 1)
        } else {
          this.workshop[this.activeName].action = 'delete'
          this.workshop[this.activeName].devices = []
        }
        this.addEditVisible = false
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.workshop.some((item, index) => {
          if (item.action !== 'delete') {
            this.activeName = index + ''
          }
        })
        // this.activeName = (this.workshop.length - 1).toString()
      })
      // }
    },
    // 抓取要拖动的元素
    drag(ev, id, item, f, idx) {
      this.isEnv = false
      this.halfWidth = item.icon.width / item.icon.type / 2
      this.halfHeight = item.icon.height / item.icon.type / 2
      if (f) {
        this.first = true
      } else {
        this.first = false
        this.clientX = ev.clientX
        this.clientY = ev.clientY
        this.offsetLeft = ev.target.offsetLeft
        this.offsetTop = ev.target.offsetTop
      }
      this.dragId = id
      ev.dataTransfer.setData('Text', id)
      this.tempObj = item
      // 边界处理
      this.tagIndex = idx
      this.tagWidth = item.icon.width / item.icon.type
      this.tagHeight = item.icon.height / item.icon.type
      // this.tagWidth = ev.target.clientWidth
      // this.tagHeight = ev.target.clientWidth
    },
    allowDrop(ev) {
      ev.preventDefault()
      var elm = document.getElementById(this.dragId)
      if (!this.first) {
        this.moveX = ev.clientX - this.clientX
        this.moveY = ev.clientY - this.clientY
      }
      elm.style.opacity = 0
      this.timeOut && clearTimeout(this.timeOut)
      // 处理拖动边界问题
      if (!this.first) {
        if (this.offsetLeft + this.moveX < 0) {
          elm.style.left = 0
          elm.style.top = this.offsetTop + this.moveY + 'px'
          this.tempObj.position.l = 0
          this.tempObj.position.t = this.offsetTop + this.moveY
          elm.style.opacity = 1
        }
        if (this.offsetTop + this.moveY < 0) {
          elm.style.top = 0
          elm.style.left = this.offsetLeft + this.moveX + 'px'
          this.tempObj.position.l = this.offsetLeft + this.moveX
          this.tempObj.position.t = 0
          elm.style.opacity = 1
        }
        if (this.offsetLeft + this.moveX + this.tagWidth > this.divWidth) {
          elm.style.left = this.divWidth - this.tagWidth + 'px'
          elm.style.top = this.offsetTop + this.moveY + 'px'
          this.tempObj.position.l = this.divWidth - this.tagWidth
          this.tempObj.position.t = this.offsetTop + this.moveY
          elm.style.opacity = 1
        }
        if (this.offsetTop + this.moveY + this.tagHeight > this.divHeight) {
          elm.style.top = this.divHeight - this.tagHeight + 'px'
          elm.style.left = this.offsetLeft + this.moveX + 'px'
          this.tempObj.position.l = this.offsetLeft + this.moveX
          this.tempObj.position.t = this.divHeight - this.tagHeight
          elm.style.opacity = 1
        }
        if (this.offsetLeft + this.moveX < 0 && this.offsetTop + this.moveY < 0) {
          elm.style.left = 0
          elm.style.top = 0
          this.tempObj.position.l = 0
          this.tempObj.position.t = 0
          elm.style.opacity = 1
        }
        if (this.offsetLeft + this.moveX + this.tagWidth > this.divWidth && this.offsetTop + this.moveY < 0) {
          elm.style.left = this.divWidth - this.tagWidth + 'px'
          elm.style.top = 0
          this.tempObj.position.l = this.divWidth - this.tagWidth
          this.tempObj.position.t = 0
          elm.style.opacity = 1
        }
        if (this.offsetLeft + this.moveX + this.tagWidth > this.divWidth && this.offsetTop + this.moveY + this.tagHeight > this.divHeight) {
          elm.style.left = this.divWidth - this.tagWidth + 'px'
          elm.style.top = this.divHeight - this.tagHeight + 'px'
          this.tempObj.position.l = this.divWidth - this.tagWidth
          this.tempObj.position.t = this.divHeight - this.tagHeight
          elm.style.opacity = 1
        }
        if (this.offsetLeft + this.moveX < 0 && this.offsetTop + this.moveY + this.tagHeight > this.divHeight) {
          elm.style.left = 0
          elm.style.top = this.divHeight - this.tagHeight + 'px'
          this.tempObj.position.l = 0
          this.tempObj.position.t = this.divHeight - this.tagHeight
          elm.style.opacity = 1
        }
      }
      // 变更action
      if (!this.workshop[this.activeName].isNew) {
        this.workshop[this.activeName].action = 'update'
      }
    },
    // 把元素放到容器中
    drop(ev) {
      ev.preventDefault();
      const data = ev.dataTransfer.getData('Text')
      const elm = document.getElementById(data)
      const odiv = ev.target
      elm.style.position = 'absolute'
      elm.style.opacity = 1
      if (odiv.id !== '') {
        if (this.first) {
          elm.style.left = ev.target.offsetLeft + 'px'
          elm.style.top = ev.target.offsetTop + 'px'
          this.tempObj.position.l = ev.target.offsetLeft
          this.tempObj.position.t = ev.target.offsetTop
        } else {
          elm.style.left = this.offsetLeft + this.moveX + 'px'
          elm.style.top = this.offsetTop + this.moveY + 'px'
          this.tempObj.position.l = this.offsetLeft + this.moveX
          this.tempObj.position.t = this.offsetTop + this.moveY
        }
      } else {
        if (this.first) {
          elm.style.left = ev.layerX - this.halfWidth + 'px'
          elm.style.top = ev.layerY - this.halfHeight + 'px'
          this.tempObj.position.l = ev.layerX - this.halfWidth
          this.tempObj.position.t = ev.layerY - this.halfHeight
        } else {
          elm.style.left = this.offsetLeft + this.moveX + 'px'
          elm.style.top = this.offsetTop + this.moveY + 'px'
          this.tempObj.position.l = this.offsetLeft + this.moveX
          this.tempObj.position.t = this.offsetTop + this.moveY
        }
      }
      // 处理边界
      if (!this.first) {
        if (this.offsetLeft + this.moveX < 0) {
          elm.style.left = 0
          this.tempObj.position.l = 0
        }
        if (this.offsetTop + this.moveY < 0) {
          elm.style.top = 0
          this.tempObj.position.t = 0
        }
        if (this.offsetLeft + this.moveX + this.tagWidth > this.divWidth) {
          elm.style.left = this.divWidth - this.tagWidth + 'px'
          this.tempObj.position.l = this.divWidth - this.tagWidth
        }
        if (this.offsetTop + this.moveY + this.tagHeight > this.divHeight) {
          elm.style.top = this.divHeight - this.tagHeight + 'px'
          this.tempObj.position.t = this.divHeight - this.tagHeight
        }
      }
      // 操作数据
      this.tempObj.position.z = this.zIndex++
      if (!this.isEnv) {
        if (!this.workshop[this.activeName].devices.length) {
          // 左侧添加数据
          this.workshop[this.activeName].devices.push(this.tempObj)
          // 右侧删除数据
          this.otherDevices = this.otherDevices.filter(item => {
            return item.deviceUUID !== this.dragId
          })
        } else {
          const isHas = this.workshop[this.activeName].devices.some(item => {
            return item.deviceUUID === this.dragId
          })
          if (!isHas) {
            // 左侧添加数据
            this.workshop[this.activeName].devices.push(this.tempObj)
            // 右侧删除数据
            this.otherDevices = this.otherDevices.filter(item => {
              return item.deviceUUID !== this.dragId
            })
          }
        }
      } else {
        if (!this.workshop[this.activeName].envLayout.length) {
          // 左侧添加数据
          this.workshop[this.activeName].envLayout.push(this.tempObj)
        } else {
          if (this.addEnv) {
            // 左侧添加数据
            this.workshop[this.activeName].envLayout.push(this.tempObj)
          }
        }
      }
    },
    allowDropCur(ev) {
      ev.preventDefault()
      this.timeOut && clearTimeout(this.timeOut)
    },
    ondragleave(ev) {
      var elm = document.getElementById(this.dragId)
      // elm.style.opacity = 1
      this.timeOut = setTimeout(() => {
        elm.style.opacity = 1
      }, 1000)
    },
    dropCur(ev) {
      ev.preventDefault()
      const elm = document.getElementById(this.dragId)
      if (!this.tempObj.type) {
        // 非环境组件才可以放入设备组件容器
        elm.style.opacity = 1
        const isHas = this.otherDevices.some(item => {
          return item.deviceUUID === this.dragId
        })
        if (!isHas) {
          this.otherDevices.push(this.tempObj)
          this.workshop[this.activeName].devices = this.workshop[this.activeName].devices.filter(item => {
            return item.deviceUUID !== this.dragId
          })
        }
      } else {
        this.$message({
          message: '环境组件不能归类到设备组件，请重新操作',
          type: 'warning'
        });
      }
    },
    // env
    dragEnvOrigin(ev, id, item, f, idx) {
      this.addEnv = f
      const tempItem = JSON.parse(JSON.stringify(item))
      tempItem.randomId = new Date().getTime()
      this.isEnv = true
      this.halfWidth = tempItem.icon.width / tempItem.icon.type / 2
      this.halfHeight = tempItem.icon.height / tempItem.icon.type / 2
      if (f) {
        this.first = true
      } else {
        this.first = false
        this.clientX = ev.clientX
        this.clientY = ev.clientY
        this.offsetLeft = ev.target.offsetLeft
        this.offsetTop = ev.target.offsetTop
      }
      this.dragId = id
      ev.dataTransfer.setData('Text', id)
      this.tempObj = tempItem
      // 边界处理
      this.tagIndex = idx
      this.tagWidth = tempItem.icon.width / tempItem.icon.type
      this.tagHeight = tempItem.icon.height / tempItem.icon.type
      // this.tagWidth = ev.target.clientWidth
      // this.tagHeight = ev.target.clientWidth
    },
    dragEnv(ev, id, item, f, idx) {
      this.addEnv = f
      item.randomId = id
      this.isEnv = true
      this.halfWidth = item.icon.width / item.icon.type / 2
      this.halfHeight = item.icon.height / item.icon.type / 2
      if (f) {
        this.first = true
      } else {
        this.first = false
        this.clientX = ev.clientX
        this.clientY = ev.clientY
        this.offsetLeft = ev.target.offsetLeft
        this.offsetTop = ev.target.offsetTop
      }
      this.dragId = item.randomId
      ev.dataTransfer.setData('Text', item.randomId)
      this.tempObj = item
      // 边界处理
      this.tagIndex = idx
      this.tagWidth = item.icon.width / item.icon.type
      this.tagHeight = item.icon.height / item.icon.type
      // this.tagWidth = ev.target.clientWidth
      // this.tagHeight = ev.target.clientWidth
    },
    dropEnv(ev) {
      ev.preventDefault()
      const elm = document.getElementById(this.dragId)
      if (this.tempObj.type) {
        // 非环境组件才可以放入设备组件容器
        elm.style.opacity = 1
        this.workshop[this.activeName].envLayout.splice(this.tagIndex, 1)
      } else {
        this.$message({
          message: '设备组件不能归类到环境组件，请重新操作',
          type: 'warning'
        });
      }
    },
    allowDropEnv(ev) {
      ev.preventDefault()
      this.timeOut && clearTimeout(this.timeOut)
    },
  }
}
</script>

<style lang="scss" scoped>
.drag-cont {
  flex-grow: 1;
  min-height: calc(100vh - 68px);
  .screen-cont {
    width: 100%;
    height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    margin-bottom: 20px;
    border-top: 1px solid #E9E9E9;
    padding: 6px 0;
    box-shadow: 0px 1px 4px 0px rgba(0, 21, 41, 0.12);
  }
}
.add-cont {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  background: #fff;;
}
.my-container {
  width: 100%;
  min-width: 1200px;
  /deep/ .el-dialog__body {
    padding: 0;
    background: #F0F2F5;
  }
  .content {
    width: 100%;
    display: flex;
  }
  .top {
    width: 100%;
    height: 68px;
    padding: 0 24px;
    box-sizing: border-box;
    background: #FFFFFF;
    box-shadow: 0px 1px 4px 0px rgba(0, 21, 41, 0.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .icon-back {
      display: inline-block;
      width: 34px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid #D9D9D9;
      cursor: pointer;
      margin-right: 20px;
    }
    .name {
      color: #000;
      font-size: 20px;
      font-weight: bold;
    }
  }
}
/deep/ .el-tabs--border-card {
  width: 845px;
  margin: 0 auto;
  background: none;
  border: 0;
  box-shadow: none;
  .el-tabs__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
    height: 68px;
    line-height: 68px;
    background: #fff;
    border: 0;
    margin-bottom: 20px;
    .el-tabs__nav-prev {
      line-height: 68px;
    }
    .el-tabs__nav-next {
      line-height: 68px;
    }
    .el-tabs__nav {
      padding: 0 10px;
    }
    .el-tabs__item {
      color: #262626;
      font-size: 18px;
      font-weight: bold;
      border: 0;
      padding: 0 10px;
      padding-right: 0 !important;
      margin: 0 10px;
      &:nth-child(2) {
        padding-left: 10px;
      }
      span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 30px;
      }
      .tab-action-cont {
        width: 38px;
        height: 30px;
        background: #F4F5F9;
        border-radius: 0px 2px 2px 0px;
        display: none;
        margin-left: 16px;
      }
      &.is-active {
        height: 32px;
        border-radius: 4px;
        border: 1px solid #D9D9D9;
        color: #409EFF;
        .tab-action-cont {
          display: flex;
        }
      }
    }
    .el-tabs__new-tab {
      width: 65px;
      height: 32px;
      line-height: 32px;
      margin: 0px 15px;
      &::after {
        content: '新增';
        color: #262626;
        font-size: 14px;
      }
      .el-icon-plus {
        display: none;
      }
    }
  }
  .el-tabs__content {
    padding: 0px;
    background: #fff;
  }
}

.preview {
  /deep/ .el-tabs--border-card {
    width: 845px;
    margin: 0 auto;
    background: none;
    border: 0;
    box-shadow: none;
    .imgcur {
      cursor: auto !important;
      position: absolute;
    }
    .el-tabs__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      height: 68px;
      line-height: 68px;
      background: #fff;
      border: 0;
      margin-bottom: 20px;
    }
    .el-tabs__item {
      padding-right: 10px !important;
    }
  }
}

.tab-action-cont {
  display: inline-flex;
  width: 16px;
  height: 16px;
  text-align: center;
  margin-left: 5px;
  font-size: 12px;
  .el-icon-edit {
    -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
    transition: all .3s cubic-bezier(.645,.045,.355,1);
    &:hover {
      color: red;
    }
  }
}
.bg-cont {
  width: 100%;
  /* height: 468px; */
  background: url('../../../assets/imgs/pt-bg.png') no-repeat;
  background-size: cover;
  position: relative;
  .right-img-cont {
    background-size: cover !important;
    position: absolute;
    cursor: move;
    border: 1px dashed #e4e4e4;
    border-radius: 3px;
    &:hover {
      border-color: #409eff;
    }
    .refresh-cont {
      width: 20px;
      height: 20px;
      position: absolute;
      top: 0;
      right: 0;
      cursor: pointer;
      background: #f1f1f1;
      border-radius: 3px;
      &:hover {
        background: #409eff;
        color: #fff;
      }
      .el-icon-refresh {
        font-size: 16px;
        padding: 2px;
      }
    }
    .imgcur {
      width: 100%;
      height: 100%;
    }
  }
}
.env-cont {
  width: 360px;
  height: 356px;
  background: #fff;
  border: 1px solid #E9E9E9;
  .title {
    text-align: center;
    border-bottom: 1px solid #E9E9E9;
    line-height: 56px;
    font-size: 16px;
    color: #262626;
    font-weight: bold;
  }
  .cont {
    width: 100%;
    height: 300px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    /* align-items: center; */
    padding: 24px;
    box-sizing: border-box;
    overflow-x: hidden;
    .item {
      width: 140px;
      height: 134px;
      border-radius: 4px;
      border: 1px solid #E4E4E4;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 8px 10px;
      box-sizing: border-box;
      cursor: pointer;
      margin-bottom: 20px;
      position: inherit !important;
      opacity: 1 !important;
      .img {
        width: 80px;
        /* height: 80px; */
      }
      span {
        display: inline-block;
        width: 100%;
        word-break: break-all;
        text-align: center;
        font-size: 12px;
        margin-top: 10px;
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
      }
    }
  }
}
.right {
  width: 360px;
  background: #fff;
  border: 1px solid #E9E9E9;
  .title {
    text-align: center;
    border-bottom: 1px solid #E9E9E9;
    line-height: 56px;
    font-size: 16px;
    color: #262626;
    font-weight: bold;
  }
  .cont {
    width: 100%;
    height: calc(100vh - 481px);
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    /* align-items: center; */
    padding: 24px;
    box-sizing: border-box;
    position: relative;
    .item {
      width: 140px;
      height: 134px;
      border-radius: 4px;
      border: 1px solid #E4E4E4;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 8px 10px;
      box-sizing: border-box;
      cursor: pointer;
      margin-bottom: 20px;
      .img {
        width: 80px;
        /* height: 80px; */
      }
      span {
        display: inline-block;
        width: 100%;
        word-break: break-all;
        text-align: center;
        font-size: 12px;
        margin-top: 10px;
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
      }
    }
  }
}
.btn-cont {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  margin: 20px 0;
}
</style>
散修灬
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue-drag-it-dude-Vue2组件，它使您可以将对象拖到所需的位置。-Vue.js开发
05-27
vue-drag-it-dude Vue2组件，可让您将对象拖动到任意位置。可以做什么将DOM元素拖放到父级中（或将docume vue-drag-it-dude Vue2组件拖放到任何位置，可将对象拖到任何地方您想要做什么可以将DOM元素拖放到父级（或...
基于Vue实现可以拖拽的树形表格实例详解
10-17
因业务需求，需要一个树形表格，并且支持拖拽排序，任意未知插入，github搜了下，真不到合适的，大部分树形表格都没有拖拽功能，所以决定自己实现一个。这里分享一下实现过程,需要的朋友可以参考下
vue3拖拽布局+动态组件+自适应布局
蒋小姐的博客
04-08 6562
/在package.json中dependencies下添加下面插件库，并执行命令npm install。Vue Grid Layout -️ 适用Vue.js的栅格布局系统。可拖动和可调整大小栅格布局的Vue组件。
Vue使用自定义指令实现按钮在区域内任意拖拽移动
卡洛背心的博客
06-02 2161
Vue使用自定义指令实现按钮在区域内任意拖拽移动项目场景实现思路实现效果实现代码 项目场景 实现一个按钮，然后这个按钮可以在页面范围内，被拖拽到任意位置。 实现思路 实现父子两个div，并且设置需要拖拽的子元素为相对定位，其父元素为绝对定位 当鼠标按下(onmousedown)时，记录此时目标元素当前的 left 和 top 值 在鼠标移动(onmousemove)的过程中，计算每次移动的横向距离和纵向距离的变化值， 然后实时并改变元素的 left 和 top 值 最后，鼠标松开(onmouseup)时.
VUE原生拖拽列表，移动元素位置
最新发布
weixin_65607135的博客
06-17 198
VUE原生拖拽列表，移动元素位置
Vue 实现拖拽模块(四)拖拽元件位置
记得抬头微笑
12-29 2236
本文将继续给大家分享如何拖拽改变 元件位置，文中通过示例代码介绍，感兴趣的小伙伴们可以了解一下
使用vuedraggable 对一个 `二维列表` 实现拖拽修改
reol44的博客
04-07 2080
vuedraggable实现 二维数组 座位布局拖拽修改
html5拖动监听
weixin_30537391的博客
08-07 924
在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发 释放目标时触发的事件: ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragover - 当某被...
vue draggable resizable 实现可拖拽缩放的组件功能
10-16
主要介绍了vue draggable resizable 实现可拖拽缩放的组件功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue实现开关按钮拖拽效果
10-14
在Vue.js中，实现开关按钮拖拽效果是一个有趣且实用的功能，这通常涉及到自定义指令（Directives）的使用。自定义指令允许我们扩展Vue的内置行为，使其能够处理更复杂的交互逻辑。以下是对给定代码的详细解释： 1. ...
基于Vue实现图片在指定区域内移动的思路详解
10-17
在本文中，我们将探讨如何使用Vue框架实现图片在指定区域内移动的功能。这个功能通常用于图片预览、全景图浏览或类似的应用场景，其中用户可以自由地在有限的区域内查看图片的不同部分。 首先，我们需要理解实现这...
HTML5 拖放（Drag 和 Drop）html排序拖拽案例，vue仿照element穿梭框拖拽案例。
qq_54753561的博客
05-11 2649
HTML5 拖放（Drag 和 Drop）html排序拖拽案例，vue仿照element穿梭框拖拽案例。
vue项目中实现按钮可随意移动
肖帅的博客
05-14 1843
vue项目中实现按钮可随意移动 组件代码如下： 在项目中引入该组件即可 <template> <div v-show="hide" class="move-button" ref="moveBtn" @mousedown="btnDown" @touchstart="btnDown" @mousemove="btnMove" @touchmove="btnMove" @mouseup="btnEnd"
Vue2 _ 实现拖拽功能
热门推荐
Mr.小灰狼_随笔
12-29 1万+
Vue.Draggable 是一款基于 Sortable.js 实现的 Vue 拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖 jQuery 为基础、Vue 2过渡动画兼容、支持撤销操作。
使用VueDraggable插件实现拖动交换位置
wangaiwen的博客
03-16 1996
使用VueDraggable插件实现拖动交换位置
推荐一个兼容vue2、vue3 简单好用的拖拽框选指令工具
weixin_48362724的博客
01-26 2204
vue2、vue3 拖拽框选插件
vue项目中使用vuedraggable
花落微凉梦清幽的博客
05-14 2693
安装 npm install vuedraggable <template> <div class="fluid container"> <div class="form-group form-group-lg panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">拖拽组件</h3> ..
vue html 拖拽,使用Vue实现拖拽功能步骤详解
weixin_30979383的博客
06-15 392
这次给大家带来使用Vue实现拖拽功能步骤详解，使用Vue实现拖拽功能的注意事项有哪些，下面就是实战案例，一起来看一下。效果图：HTML代码：位置x:{{val.x}} y:{{val.y}}//注意这里要通过指令绑定函数将当前元素的位置数据传出来JS代码：Vue.directive('drag',//自定义指令{bind:function (el, binding) {let op = el; ...
使用Vue.js实现HTML5拖放功能的看板应用教程
在HTML中，你可以使用`draggable`属性来标记元素为可拖动，例如： ```html <div draggable="true" class="card">Task 1 ``` 2. **监听拖放事件**：HTML5的拖放API提供了几个关键事件，如`dragstart`、`dragenter...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值