1.0.2 • Published 5 years ago
lhelementedit v1.0.2
使用方法
传递和画布div
###创建对象 在程序初始化时创建，画布生成，对象生成
let mm = new lh("panel");###添加元素
mm.addElement("tt", eidtorTool)###示例 app.js
import lh from "./src/LHElementEdit.js";
import $ from "jquery";
//创建对象
let mm = new lh("panel");
//初始化配置
function eidtorTool(ele) {
if (ele.type == "change") {
$("#" + ele.id).css("top", ele.top + "px");
$("#" + ele.id).css("left", ele.left + "px");
$("#" + ele.id).width(ele.width);
$("#" + ele.id).height(ele.height);
} else if (ele.type == "del") {
$("#" + ele.id).remove();
}
}
mm.addElement("tt", eidtorTool)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>ele edit
</title>
<style>
#panel {
position: absolute;
top: 100px;
bottom: 100px;
right: 100px;
left: 100px;
background-color: #ccc;
}
.target {
position: absolute;
top: 100px;
left: 200px;
width: 800px;
height: 820px;
background-color: #fff;
}
</style>
</head>
<body>
<div id="panel">
<div id="tt" class="target"></div>
</div>
</body>
<script src="./main.js"></script>
</html>