Does interact element size/pos support percentage unit instead of px?

[ioiofadhil]

I'm trying to make dynamic elements that could be draggable/resizeable freely by users. In pixels, it works perfectly. But I want the elements to be fit size to any devices, responsively. Which, pixels, is not the best answer for this...

My idea is to convert the pixels into percentages to its parent. But I'm wondering, is there any way to directly use percentage calculation in "move()" or any other listeners?

[ferdnyc]

@ioiofadhil

I guess I'm confused by this request because, the drag event data you're going to get is always going to be in pixels. And really, it couldn't be expressed in any other units, because the distance someone moves their pointer, or their finger, when dragging something is always going to be dimensioned in fixed units -- it's a concrete measurement, you don't drag something 10% to the left, you drag it deltaX = -25px or whatever.

So, even if you do your initial layouts in percentage units, or ems, or using any other abstract CSS length, when it comes time to process drag motion you're going to need ­— and want — to convert those abstract lengths into real pixel measurements so that you can modify them.

(Which is OK, because by the time you're processing drag events, all of the content has been laid out and everything has real pixel dimensions, already sized for the screen in question.) You can initially style your layout using percentages or whatever units you want, but your drag handler should read whatever real pixel values those measurements translated into from the elements in question, which can then be adjusted by whatever pixel distances the drag event supplies.

Things like percentage units tell the browser how to compute the pixel dimensions/positions of various page elements, but by the time things get rendered everything screen-layout-related (width, height, x and y position...) has been computed in CSS pixels, and those are the units you'd want to work in when making any adjustments during drag events. Otherwise, your size/position changes won't accurately match the user's inputs.