<template>
<div>
<!--<div id="coordiv" @mousemove="cnvs_getCoordinates" @mouseout="cnvs_clearCoordinates" />-->
<div id="coordiv" @mousemove="ommousemove"
@mousedown="onmousedown"
@mouseup="onmouseup">
<img src="../../assets/img/test.jpg" >
</div>
<br>
<form method="POST">
<input type="text" name="coor" placeholder="坐标" readonly="true" id="x_y" style="width: 800px"><br>
<input type="submit" value="提交坐标">
</form>
<div id="xycoordinates"></div>
</div>
</template>
<script type="text/ecmascript-6">
export default {
data() {
return {
startX:'',
startY:'',
diffX:'',
diffY:'',
dragging:false,
}
},
created(){
},
mounted(){
let vm = this
var coordiv = document.getElementById('coordiv');
},
methods: {
cnvs_getCoordinates(e){
var x=e.pageX-e.target.offsetLeft;//不能用clientX,pageX为文档坐标,clientX表示浏览器界面坐标,会随滚动条改变
var y=e.pageY-e.target.offsetTop;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
},
cnvs_clearCoordinates(e)//出框后不显示坐标
{
document.getElementById("xycoordinates").innerHTML="";
},
onmousedown(e) {
let vm=this;
vm.startX = e.pageX;
vm.startY = e.pageY;
if(vm.startY<=coordiv.offsetTop+coordiv.offsetHeight && vm.startY>=coordiv.offsetTop && vm.startX>=coordiv.offsetLeft && vm.startX<=coordiv.offsetLeft+coordiv.offsetWidth)
{
if(e.target.className.match(/box/))
{
vm.dragging = true;
if(document.getElementById("moving_box") !== null)
{
document.getElementById("moving_box").removeAttribute("id");
}
e.target.id = "moving_box";
vm.diffX = vm.startX - e.target.offsetLeft;
vm.diffY = vm.startY - e.target.offsetTop;
}
else
{
var active_box = document.createElement("div");
active_box.id = "active_box";
active_box.className = "box";
active_box.style.top = vm.startY + 'px';
active_box.style.left = vm.startX + 'px';
active_box.addEventListener('dblclick',function(e){
if(e.target.className.match(/box/))
{
if (document.getElementById("del_box") !== null)
{
document.getElementById("del_box").removeAttribute("id");
}
e.target.id = "del_box";
var ab = document.getElementById("del_box");
var xy_div = document.getElementById(ab.style.left.substring(0,ab.style.left.length-2)+ab.style.top.substring(0,ab.style.top.length-2))
if(xy_div !== null)
{
xy_div.removeAttribute("id");
coordiv.removeChild(xy_div);
}
coordiv.removeChild(ab);
}
},false);
active_box.addEventListener('ondragstart',function(e){
e.dataTransfer.setData("Text", e.target.id);
},false);
active_box.addEventListener('ondrop',function(e){
e.preventDefault();
var data = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
},false);
active_box.addEventListener('ondragover',function(e){
e.preventDefault();
},false);
coordiv.appendChild(active_box);
active_box = null;
}
}
},
ommousemove(e){
let vm=this;
if(e.pageY <= coordiv.offsetTop+coordiv.offsetHeight && e.pageY >= coordiv.offsetTop && e.pageX >= coordiv.offsetLeft && e.pageX <= coordiv.offsetLeft+coordiv.offsetWidth)
{
if(document.getElementById("active_box") !== null)
{
var ab = document.getElementById("active_box");
ab.style.width = e.pageX - vm.startX + 'px';
ab.style.height = e.pageY - vm.startY + 'px';
}
if(document.getElementById("moving_box") !== null && vm.dragging)
{
var mb = document.getElementById("moving_box");
var xy_div = document.getElementById(mb.style.left.substring(0,mb.style.left.length-2)+mb.style.top.substring(0,mb.style.top.length-2));
var tmx = e.pageX - vm.diffX;
var tmy = e.pageY - vm.diffY;
if(tmx + mb.offsetWidth <= coordiv.offsetLeft+coordiv.offsetWidth && tmx >= coordiv.offsetLeft && tmy + mb.offsetHeight <= coordiv.offsetTop+coordiv.offsetHeight && tmy >= coordiv.offsetTop)
{
mb.style.top = e.pageY - vm.diffY + 'px';
mb.style.left = e.pageX - vm.diffX + 'px';
if(xy_div !== null)
{
var new_x = mb.style.left.substring(0, mb.style.left.length - 2);
var new_y = mb.style.top.substring(0,mb.style.top.length - 2);
xy_div.id = new_x+new_y;
new_x-=coordiv.offsetLeft;
new_y-=coordiv.offsetTop;
var new_r = parseInt(mb.style.width.substring(0,mb.style.width.length-2))+parseInt(new_x)-coordiv.offsetLeft;
var new_b = parseInt(mb.style.height.substring(0,mb.style.height.length-2))+parseInt(new_y)-coordiv.offsetTop;//"[ left: "+ new_x +", top: "+ new_y + ", right: " + new_r +" , bottom: "+ new_b +" ]";
xy_div.innerText = new_x +","+ new_y + "," + new_r +","+ new_b;
var input_div = document.getElementById("x_y")
input_div.value=xy_div.innerHTML
}
评论5