javascript draggable not modifying coordinates on my ondrag event

Question

i have a problem with draggables...

I have a div tag which is scale to (0.5), inside of this tag i have a draggable but when i try to move it this drag is not following my cursor because of the scale...

I have a little solution but is not working at all because even if the position is setted, the position is not modified on the template...

So it means that is not following the coordinates that i assign:

<div id="container" style="transform: scale(0.5);"> <!-- the parent div with a scale of 0.5 -->
  <div id="draggable" class="draggable" ondragstart="startDrag(event)" ondrag="dragging(event)"> <!-- the child div that can be dragged -->
    <!-- content of the div -->
  </div>
</div>

<script>
  var dicti = {}; // variables to store the initial coordinates
  function startDrag(event) {
    // get the id of the element that is dragged
    var id = event.target.id;
    // save the initial coordinates in the dictionary
    dicti[id] = {x: event.clientX / 0.5, y: event.clientY / 0.5}; // divide by the scale factor
  }

  function dragging(event) {
    // get the id of the element that is dragged
    var id = event.target.id;
    // get the element that is dragged
    var element = event.target;
    // get the current coordinates of the mouse
    var mouseX = event.clientX / 0.5; // divide by the scale factor
    var mouseY = event.clientY / 0.5; // divide by the scale factor
    // calculate the displacement of the mouse relative to the initial coordinates
    var deltaX = mouseX - dicti[id].x;
    var deltaY = mouseY - dicti[id].y;
    // modify the coordinates of the element according to the displacement of the mouse
    element.style.left = (parseFloat(element.style.left) + deltaX) + "px";
    element.style.top = (parseFloat(element.style.top) + deltaY) + "px";
    // update the initial coordinates in the dictionary for the next drag event
    dicti[id].x = mouseX;
    dicti[id].y = mouseY;
    document.getElementById(id).style.left = (parseFloat(element.style.left) + deltaX) + "px";
    document.getElementById(id).style.top = (parseFloat(element.style.top) + deltaY) + "px";
  }
</script>

Here is a image for this, the draggable is not following the coordinates that i assign in the function...

Could you help me with this?

Thanks!

UPDATE:

I see that when i drag the element, it creates this css element.style, if i modify this the position is updated, how can i access to this element.style in my Javascript code?