el-dragmove
Version:
drag move element.
68 lines (58 loc) • 1.68 kB
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>Drag Move PC</title>
<style>
* {
padding: 0;
margin: 0;
}
.rect {
width: 50px;
height: 50px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: default;
user-select: none;
position: relative;
}
#rect-1 {
background-color: red;
}
#rect-2 {
background-color: black;
position: absolute;
top: 100px;
left: 100px;
}
#rect-3 {
background-color: gold;
position: absolute;
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<div id="rect-1" class="rect">1</div>
<div id="rect-2" class="rect">2</div>
<div id="rect-3" class="rect">3</div>
<script src="../dist/index.js"></script>
<script>
// translate方式移动
const targetEl = document.getElementById('rect-1')
const moveModel = new DragMoveModel({ targetEl: targetEl, limitMoveBorder: true })
// top，left方式移动
const targetEl2 = document.getElementById('rect-2')
const moveModel2 = new DragMoveModel({ targetEl: targetEl2, moveMode: 'position', limitMoveBorder: true })
// 限制边界距离
const targetEl3 = document.getElementById('rect-3')
const moveModel3 = new DragMoveModel({ targetEl: targetEl3, limitMoveBorder: true, maxMoveX: 200, maxMoveY: 100, disableMoveEl: false })
</script>
</body>
</html>