@ulmus/drag v1.1.6

@ulmus/drag

Installation

Install from NPM

npm install @ulmus/drag

Usage

<template>
  <div>
    <div class="target"></div>
  </div>
</template>
<script>
import Edrag from "e-drag";
export default {
  data() {
    return {};
  },

  mounted() {
    let text = {
      value: "文本",
      x: 0,
      y: 0,
      width: 100,
      height: 40,
      color: "#fc011a",
      fontSize: 16,
      bold: true,
      type: "text", // 必填
    };

    let image = {
      x: 100,
      y: 100,
      width: 100,
      height: 100,
      src: "", // 必填
      type: "image", // 必填
    };

    let video = {
      x: 20,
      y: 10,
      width: 300,
      height: 300,
      src: "", // 必填
      type: "video", // 必填
    };
    let target = document.querySelector(".target");
    let config = {
      width: 600, // led真实像素宽
      height: 300, // led 真实像素高
      scale: 2, // 真实像素和页面显示像素的比例 例中 页面显示容器的宽度为 600 * 2, 高度等比
      // 支持 text, image, video 三种类型元素
      elements: [text, image, video],
    };
    let s = new Edrag(config, target);
    //或者使用方法添加
    // s.addText(text); 添加一个文本拖动元素
    // s.addImage(image); 添加一个图片拖动元素
    // s.addVideo(video);  添加 一个视频拖动元素
    // delete
    // 鼠标点选元素后使用 del键删除
  },
};
</script>