How to move element X and Y with value

Question

I have a element block class = "relative" in my website and I have another element class="absolute".

I binding a size of an absolute element with height and width, but I want to bind X and Y axes.

let size = 50; //pixel
let x = 150; //pixel
let y = 150; //pixel

          <div class="relative">
             <span class="relative block">
                <span class="inline-block w-full h-full" />
                <div class="absolute inset-0 overflow-hidden z-0 visible">
                  <div class="absolute inset-0 overflow-hidden z-0 visible">
                    <canvas id="pdf_canvas" ref="pdfViewer"></canvas>
                  </div>
                  <div class="absolute top-0 left-0">
                    <div
                      id="frame"
                      class="border-dashed border-4 border-indigo-500 active:z-auto"
                      :style="{ width: size + 'px', height: size + 'px'}"         // It work
                      :class="{ top : y + 'px', left : x + 'px' }"         // Here
                    >
                      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAA8CAYAAACtrX6oAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AYht+mSqVWHOwg0iFDdbIgKuKoVShChVArtOpgcukfNDEkKS6OgmvBwZ/FqoOLs64OroIg+APi5uak6CIlfpcUWsR4x3EP733vy913gNCoMs3qGgM03TYzqaSYy6+IoVeEEUMvzYjMLGNWktLwHV/3CPD9LsGz/Ov+HH1qwWJAQCSeYYZpE68TT23aBud94igryyrxOfGoSRckfuS64vEb55LLAs+MmtnMHHGUWCx1sNLBrGxqxJPEcVXTKV/Ieaxy3uKsVWusdU/+wkhBX17iOq0YUljAIiSIUFBDBVXYSNCuk2IhQ+dJH/+Q65fIpZCrAkaOeWxAg+z6wf/gd2+t4sS4lxRJAt0vjvMxDIR2gWbdcb6PHad5AgSfgSu97d9oANOfpNfbWvwI6N8GLq7bmrIHXO4Ag0+GbMquFKQlFIvA+xl9Ux4YuAXCq17fWuc4fQCy1Kv0DXBwCIyUKHvN5909nX37t6bVvx8hCHKGQhND5wAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+UKHAsNE+dnAGUAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVR42u3BAQ0AAADCoPdPbQ8HFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPBscLwAAft69nkAAAAASUVORK5CYII="
                        class="absolute cursor-move"
                      />
                    </div> // This is an absolute element that I want to bind X and Y.
                  </div>
                </div>
              </span>
            </div>

Imagine that I have a white space in the background and I have a blue rectangle size 50px and I want it to move wherever the X and Y binding it. (Actually I want to drag it whet ever i want and bind it with X and Y too.)

Answer 1

You can use Tailwind's square bracked notation to generate a class on the fly with any arbitrary value:

<div class="top-[117px]">
  <!-- ... -->
</div>

In your case, the resulting code would look something like the following:

<div :class="'top-[' + y + 'px] left-[' + x + 'px]'">
  <!-- ... -->
</div>

Reference: https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values