Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.04.2019, 12:50
Новичок на форуме
Отправить личное сообщение для Bastonsv Посмотреть профиль Найти все сообщения от Bastonsv
 
Регистрация: 06.07.2018
Сообщений: 7

Не отрабатывает повторный onclick
Всем доброго дня.
В листинге страничка со скриптом.
Суть странички в следующем. Имеем картинку, на которую необходимо нанести три надписи (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>

Буду благодарен за помощь
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает onclick при выборе даты OlgaPavlova Общие вопросы Javascript 5 12.04.2017 17:28
Ошибка формирования onclick в IE Pavel2012 Internet Explorer 2 23.11.2012 18:06
Не отрабатывает OnChange и OnClick KsenZ Events/DOM/Window 1 22.08.2011 09:31
OnClick ячейки таблицы и ссылки в этой ячейке MasDen Javascript под браузер 2 30.06.2011 10:34
Событие onClick avtor01 Events/DOM/Window 3 03.09.2009 18:01