Problem z clientX i Y

0

Cześć, mam taki kod:

HTML

<div ondragEnd="set(event,this)" draggable="true">Div 1</div>

CSS:

div{
    padding: 10px;
    background: yellow;
    position: absolute;
    left: 0;
    top: 0;
}

JS:

function set(event, div)
{
    var mouseX = event.clientX + "px";
    var mouseY = event.clientY + "px";
    div.style.left = mouseX;
    div.style.top = mouseY;
    console.log(mouseX);
    console.log(mouseY);
}

I za każdym razem pokazuje mi 0px. Dlaczego tak się dzieje i jak mogę to naprawić?

0

Twoje pytanie brzimi dla mnie mniej więcej tak... "Zrobiłem i mi nie działa". NIe wynika jednak z niego co chcesz osiągnąć.
Co chcesz żeby się pokazywało - bo możliwości jest sporo. Może się pokazywać nowa pozycja DIV'a, względne przesunięcie div'a itp ..

<html>
<body style=''>
  <div ondragEnd="get(event,this);" draggable="true">Div 1</div>
  <style>
  div{
    padding: 10px;
    background: yellow;
    position: absolute;
    left: 600;
    top: 500;
  }
  </style>

  <script>
  function get(event, div)
  {
    console.log ( event );
    var mouseX = event.clientX + "px";
    var mouseY = event.clientY + "px";
    div.style.left = mouseX;
    div.style.top = mouseY;
    // inne wartości, które mogą być przydatne.
    console.log(event.screenX);
    console.log(event.screenY);
    console.log(event.pageX);
    console.log(event.pageY);

  }
  </script>
</body>
</html>
0
katakrowa napisał(a):

A co chcesz uzyskać? Co chcesz żeby się pokazywało - bo możliwości jest sporo. Może się pokazywać nowa pozycja DIV'a, względne przesunięcie div'a itp ..

Chciałbym, aby pozycja diva zmieniła się na pozycję myszki przy upuszczeniu.

0
katakrowa napisał(a):

Twoje pytanie brzimi dla mnie mniej więcej tak... "Zrobiłem i mi nie działa". NIe wynika jednak z niego co chcesz osiągnąć.
Co chcesz żeby się pokazywało - bo możliwości jest sporo. Może się pokazywać nowa pozycja DIV'a, względne przesunięcie div'a itp ..

<html>
<body style=''>
  <div ondragEnd="get(event,this);" draggable="true">Div 1</div>
  <style>
  div{
    padding: 10px;
    background: yellow;
    position: absolute;
    left: 600;
    top: 500;
  }
  </style>

  <script>
  function get(event, div)
  {
    console.log ( event );
    var mouseX = event.clientX + "px";
    var mouseY = event.clientY + "px";
    div.style.left = mouseX;
    div.style.top = mouseY;
    // inne wartości, które mogą być przydatne.
    console.log(event.screenX);
    console.log(event.screenY);
    console.log(event.pageX);
    console.log(event.pageY);

  }
  </script>
</body>
</html>

U mnie się nie zmienia CodePen

1 użytkowników online, w tym zalogowanych: 0, gości: 1