<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Draw Arrow</title>
<style>
#app {
width: 100%;
height: 100%;
display: flex;
}
.left {
flex: 40%;
height: 100%;
display: flex;
flex-wrap: wrap;
height: 600px;
border: 1px solid orange;
}
.left-item {
width: 50px;
height: 50px;
margin: 20px;
}
.right {
flex: 60%;
height: 100%;
display: flex;
height: 600px;
border: 1px solid orange;
}
.box {
width: 50px;
height: 50px;
border: 1px solid black;
margin: 30px;
}
.arrow {
position: absolute;
background-color: green;
width: 10px;
height: 2px;
}
</style>
</head>
<body>
<div id="app">
<div class="left">
<div class="left-item" :style="{ backgroundColor: item.color }" v-for="item in tasklist"
@click="clicktask(item)">
{{item.name}}
</div>
</div>
<div class="right">
<div
class="box"
v-for="(item,index) in worklist"
@mousedown="handleMouseDown(index)"
@mouseup="handleMouseUp(index)"
ref="boxes"
>
{{item.name}}
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
tasklist: [
{ id: 1, name: 'task1', color: 'orange' },
{ id: 2, name: 'task2', color: 'green' }
],
worklist: [
],
isMouseDown: false,
startPosition: {
x: 0,
y: 0
},
endPosition: {
x: 0,
y: 0
}
},
methods: {
clicktask(item) {
this.worklist.push(item)
},
handleMouseDown(index) {
this.isMouseDown = true;
this.startPosition.x = event.clientX;
this.startPosition.y = event.clientY;
},
handleMouseUp(index) {
if (this.isMouseDown) {
this.isMouseDown = false;
this.endPosition.x = event.clientX;
this.endPosition.y = event.clientY;
if (this.startPosition.x !== this.endPosition.x) {
const arrow = document.createElement('div');
arrow.classList.add('arrow');
arrow.style.left = this.startPosition.x + "px"
arrow.style.top = this.startPosition.y + "px"
arrow.style.width = Math.max(this.endPosition.x - this.startPosition.x, 0) + "px"
arrow.style.transform = `rotate(${Math.atan((this.endPosition.y - this.startPosition.y) / (this.endPosition.x - this.startPosition.x ))}rad)`
document.body.appendChild(arrow);
}
}
}
}
});
</script>
</body>
</html>
