object moving with javascript-CodePudding

i want to move my "robot" div where i clicked , so i wrote a javascript code :

document.addEventListener('mousedown', function(event) {
  let robot = document.querySelector('.robot');
  robot.clientTop = event.pageX   'px';
  robot.clientLeft = event.pageY   'px';
});

.robot {
  background-color: rgb(10, 0, 143);
  height: 120px;
  width: 120px;
  border-radius: 15px;
  margin: 25px auto;
}

<div class="robot">
  <span class="eyes_left">
    
                </span>
  <span class="eyes_right">
    
                </span>
  <div class="hands">

  </div>
  <div class="battery">
    <div class="charge">

    </div>
    <div class="charge">

    </div>
    <div class="charge">

    </div>
    <div class="charge">

    </div>

  </div>
</div>

but it doesn't work and don't say any errors whats the problem ??

CodePudding user response：

Unfortunatly you cannot set the clientTop in the way you have tried. You need to use css to adjust the position. Give the element position: absolute and then update the top and left position in the javascript.

document.addEventListener('mousedown', function(event) {
  let robot = document.querySelector('.robot');
  robot.style.top = event.pageY   'px';
  robot.style.left = event.pageX   'px';
});

.robot {
  background-color: rgb(10, 0, 143);
  height: 120px;
  width: 120px;
  border-radius: 15px;
  margin: 25px auto;
  position: absolute;
}

<div class="robot">
  <span class="eyes_left">
    
                </span>
  <span class="eyes_right">
    
                </span>
  <div class="hands">

  </div>
  <div class="battery">
    <div class="charge">

    </div>
    <div class="charge">

    </div>
    <div class="charge">

    </div>
    <div class="charge">

    </div>

  </div>
</div>

CodePudding user response：

Use this method.

let robot = document.querySelector('.robot');

document.addEventListener('mousedown' , function (event){
    let y = event.pageY   'px';
    let x = event.pageX   'px';
    robot.setAttribute('style', `top:  ${y}; left:  ${x}`);
    console.log(`Position Updated, top:  ${y}; left:  ${x}`)
});

.robot{
    background-color: rgb(10, 0, 143);
    height:120px;
    width:120px;
    border-radius:15px;
    position: relative;
}

<div class="robot">
            <span class="eyes_left">

            </span>
            <span class="eyes_right">

            </span>
            <div class="hands">

            </div>
            <div class="battery">
                <div class="charge">

                </div>
                <div class="charge">
                    
                </div>
                <div class="charge">
                    
                </div>
                <div class="charge">
                    
                </div>
                
            </div>
    </div>

CodePudding user response：

https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft

clientTop and clientLeft are read only properties