Всем доброго дня.
В листинге страничка со скриптом.
Суть странички в следующем. Имеем картинку, на которую необходимо нанести три надписи (AA1BBC, Name Sirname, 0123). После нанесения - допустим, пользователь хочет изменить координаты первой надписи AA1BBC, для этого он кликает в надпись - на соответствующем диве срабатывает событие oncklick и функция changecoordinate присваивает перемещающемуся за мышкой диву соответствующий ID (в зависимости от того координаты какой надписи хочет изменить пользователь).
Проблема в том, что пользователь не может передвинуть эту же надпись повторно. Он должен сначала передвинуть любую другую надпись. Подскажите как обойти это или где я допустил ошибку.
Я не профик в JS, скрипт написан мной лично, поэтому прошу отнестись с пониманием.
<html lang="en">
<meta charset="utf-8">
<head>
<style type="text/css">
#el{
position:relative;
/* width: 100%;*/
/* z-index: 2*/
/*background:#555*/
}
.stamp{
/* width:400px;*/
height:35px;
background:#ddd;
position: absolute;
opacity:0.9;
font-size:25px;
/*z-index: 2*/
}
.stamp2{
/* width:400px;*/
height:35px;
background:#ddd;
position: absolute;
opacity:0.6;
font-size:25px;
/*z-index: 2*/
}
.description{
width:100%;
height: 100px;
border:2px;
}
</style>
</head>
<body>
<div class="description">
<input type='hidden' id="X-call" name="X-call">
<input type='hidden' id="Y-call" name="Y-call">
<input type='hidden' id="X-name" name="X-name">
<input type='hidden' id="Y-name" name="Y-name">
<input type='hidden' id="X-num" name="X-name">
<input type='hidden' id="Y-num" name="Y-name">
</div>
<img id="el" src='1.png' >
<script type="text/javascript">
var el = document.getElementById('el');
el.addEventListener('click', getClickXY, false);
el.addEventListener('mousemove', moveClickXY, false);
//mouseup
//document.getElementById('call').innerText="call";
function getClickXY(event)
{
var clickX = (event.layerX == undefined ? event.offsetX : event.layerX) + 1;
var clickY = (event.layerY == undefined ? event.offsetY : event.layerY) + 1;
if(document.getElementById('num')) {
var name1="num";
var name2="nummove";
var valueX="X-num";
var valueY="Y-num";
var divfixedname="numfixed";
document.getElementById(name1).innerText="0123";
document.getElementById(name2).style.zindex = -1;
document.getElementById(valueX).value = clickX + 12;
document.getElementById(valueY).value = clickY;
divkoordinateY = clickY + 70;
divkoordinateY2 = clickY + 120;
setcoordinate=confirm('1');
if(setcoordinate){
document.getElementById(divfixedname).style.top = divkoordinateY + 'px';
document.getElementById(divfixedname).style.left = clickX + 12 + 'px';
document.getElementById(divfixedname).innerText="0123";
document.getElementById(name1).id = "Ready";
document.getElementById(name2).id = "Readymove";
}
}
if(document.getElementById('name')) {
var name1="name";
var name2="namemove";
var valueX="X-name";
var valueY="Y-name";
var divfixedname="namefixed";
document.getElementById(name1).innerText="Name Sirname";
document.getElementById(name2).style.zindex = -1;
document.getElementById(valueX).value = clickX + 12;
document.getElementById(valueY).value = clickY;
divkoordinateY = clickY + 70;
divkoordinateY2 = clickY + 120;
setcoordinate=confirm('2');
if(setcoordinate){
document.getElementById(divfixedname).style.top = divkoordinateY + 'px';
document.getElementById(divfixedname).style.left = clickX + 12 + 'px';
document.getElementById(divfixedname).innerText="Name Sirname";
if (document.getElementById('X-num').value==""){
document.getElementById(name1).id = "num";
document.getElementById(name2).id = "nummove";
} else if (document.getElementById('X-num').value!=""){
document.getElementById(name1).id = "Ready";
document.getElementById(name2).id = "Readymove";
}
}
}
if(document.getElementById('call')) {
var name1="call";
var name2="callmove";
var valueX="X-call";
var valueY="Y-call";
var divfixedname="callfixed";
document.getElementById(name1).innerText="AA1BBC";
//document.getElementById(name2).style.zindex = -1;
document.getElementById(valueX).value = clickX + 12;
document.getElementById(valueY).value = clickY;
divkoordinateY = clickY + 70;
divkoordinateY2 = clickY + 120;
setcoordinate=confirm('3');
if(setcoordinate){
//document.getElementById(name1).id = "name";
// document.getElementById(name2).id = "namemove";
document.getElementById(divfixedname).style.top = divkoordinateY +'px';
document.getElementById(divfixedname).style.left = clickX+12+'px';
document.getElementById(divfixedname).innerText="AA1BBC";
if (document.getElementById('X-name').value==""){
document.getElementById(name1).id = "name";
document.getElementById(name2).id = "namemove";
} else if (document.getElementById('X-name').value!=""){
document.getElementById(name1).id = "Ready";
document.getElementById(name2).id = "Readymove";
}
}
}
}
function moveClickXY(event)
{
var clickX = (event.layerX == undefined ? event.offsetX : event.layerX) + 1;
var clickY = (event.layerY == undefined ? event.offsetY : event.layerY) + 1;
if(document.getElementById('num'))
{
var name1="num";
var name2="nummove";
divkoordinateY=clickY+70;
divkoordinateY2=clickY+120;
document.getElementById(name2).innerText="0123";
document.getElementById(name1).style.zindex =-1;
document.getElementById(name2).style.top = divkoordinateY+'px';
document.getElementById(name2).style.left = clickX+12+'px';
}
if(document.getElementById('name'))
{
var name1="name";
var name2="namemove";
divkoordinateY=clickY+70;
divkoordinateY2=clickY+120;
document.getElementById(name2).innerText="Name Sirname";
document.getElementById(name1).style.zindex =-1;
document.getElementById(name2).style.top = divkoordinateY+'px';
document.getElementById(name2).style.left = clickX+12+'px';
}
if(document.getElementById('call'))
{
var name1="call";
var name2="callmove";
divkoordinateY=clickY+70;
divkoordinateY2=clickY+120;
document.getElementById(name2).innerText="AA1BBC";
document.getElementById(name1).style.zindex =-1;
document.getElementById(name2).style.top = divkoordinateY+'px';
document.getElementById(name2).style.left = clickX+12+'px';
}
/*
var clickX = (event.layerX == undefined ? event.offsetX : event.layerX) + 1;
var clickY = (event.layerY == undefined ? event.offsetY : event.layerY) + 1;
divkoordinateY=clickY+70;
divkoordinateY2=clickY+120;
document.getElementById('st').style.zindex =-1;
document.getElementById('stmove').style.top = divkoordinateY+'px';
document.getElementById('stmove').style.left = clickX+12+'px';
document.getElementById('stmove2').style.top = divkoordinateY2+'px';
document.getElementById('stmove2').style.left = clickX+12+'px';
*/
}
function changecoordinate(who){
//alert(who);
if (who=="callfixed"){
var name1="call";
var name2="callmove";
document.getElementById('Ready').id = name1;
document.getElementById('Readymove').id = name2;
}
if (who=="namefixed"){
var name1="name";
var name2="namemove"
document.getElementById('Ready').id = name1;
document.getElementById('Readymove').id = name2;
}
if (who=="numfixed"){
var name1="num";
var name2="nummove";
document.getElementById('Ready').id = name1;
document.getElementById('Readymove').id = name2;
}
}
</script>
<div class="stamp" id="call"><center> </center></div>
<div class="stamp" id="callfixed" onclick="changecoordinate('callfixed');" ><center> </center></div>
<div class="stamp" id="namefixed" onclick="changecoordinate('namefixed');"><center> </center></div>
<div class="stamp" id="numfixed" onclick="changecoordinate('numfixed');"><center> </center></div>
<div class="stamp2"id="callmove"><center></center></div>
</body>
</html>
Буду благодарен за помощь
