<html lang="en">
<head>
<meta charset="UTF-8">
<title> title>
<style type="text/css">
.box {
background: #f00;
width: 0px;
height: 0px;
position: absolute;
opacity: 0.5;
cursor: move;
}
.droptarget {
float: left;
width: 100px;
height: 1000px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
style>
head>
<body>
<h1> h1>
<script>
function cnvs_getCoordinates(e)
{
x=e.pageX-e.target.offsetLeft;
y=e.pageY-e.target.offsetTop;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}
function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}
script>
<div id="coordiv" style="{{ style }}" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()" >
<img src="{{ img_src }}" ondragstart="return false;" >
<script type="text/javascript">
console.log('=========')
window.onload = function(e)
{
e = e || window.event;
var startX, startY, diffX, diffY;
var dragging = false;
var coordiv = document.getElementById('coordiv');
document.onmousedown = function(e)
{
startX = e.pageX;
startY = e.pageY;
if(startY<=coordiv.offsetTop+coordiv.offsetHeight && startY>=coordiv.offsetTop && startX>=coordiv.offsetLeft && startX<=coordiv.offsetLeft+coordiv.offsetWidth)
{
if(e.target.className.match(/box/))
{
dragging = true;
if(document.getElementById("moving_box") !== null)
{
document.getElementById("moving_box").removeAttribute("id");
}
e.target.id = "moving_box";
diffX = startX - e.target.offsetLeft;
diffY = startY - e.target.offsetTop;
}
else
{
var active_box = document.createElement("div");
active_box.id = "active_box";
active_box.className = "box";
active_box.style.top = startY + 'px';
active_box.style.left = startX + 'px';
active_box.setAttribute("ondrop","drop(event)");
active_box.setAttribute("ondragover","allowDrop(event)");
document.body.appendChild(active_box);
active_box = null;
}
}
};
document.onmousemove = function(e)
{
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 - startX + 'px';
ab.style.height = e.pageY - startY + 'px';
}
if(document.getElementById("moving_box") !== null && 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 - diffX;
var tmy = e.pageY - 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 - diffY + 'px';
mb.style.left = e.pageX - 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;
xy_div.innerText = new_x +","+ new_y + "," + new_r +","+ new_b;
var input_div = document.getElementById("x_y")
input_div.value=xy_div.innerHTML
}
}
}
}
};
document.onmouseup = function(e)
{
dragging = false;
if(document.getElementById("active_box") !== null)
{
var ab = document.getElementById("active_box");
ab.removeAttribute("id");
if(ab.offsetWidth < 10 || ab.offsetHeight < 10)
{
document.body.removeChild(ab);
}
if(ab.offsetHeight >=10 && ab.offsetHeight >=10)
{
var xy_div = document.createElement("div");
xy_div.id=startX.toString()+startY.toString();
document.body.appendChild(xy_div);
xy_div.innerHTML = (startX-coordiv.offsetLeft) + "," + (startY-coordiv.offsetTop) + "," + (e.pageX-coordiv.offsetLeft) + "," + (e.pageY-coordiv.offsetTop);
var input_div = document.getElementById("x_y")
input_div.value=xy_div.innerHTML
}
}
};
document.ondblclick = 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");
document.body.removeChild(xy_div);
}
document.body.removeChild(ab);
}
}
};
script>
div>
<br>
<form method="POST">
<input type="text" name="location" placeholder=" "><br>
<input type="text" name="coor" placeholder=" " readonly="true" id="x_y" style="width: 800px"><br>
<input type="submit" value=" ">
form>
<script>
function dragStart(event)
{
event.dataTransfer.setData("Text", event.target.id);
}
function allowDrop(event)
{
event.preventDefault();
}
function drop(event)
{
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
script>
<div id="xycoordinates">div>
body>
html>