Resize an element by mouse/touch dragging

[LetsHaveASquint]

Hi, I'm trying to use Plain Draggable in a WordPress page (can't show it because it's still only on my local drive). I'm using Scrips N Styles to allow me to add CSS and JS to the page.

I'm following your JSFiddle from here: https://jsfiddle.net/byaje56n/ And the closed thread: resize element? #7

Anyway, all is working fine outside of WordPress.

In WordPress all is fine as well, except when I switch to responsive. When I'm in responsive mode and begin to drag the handle, the box immediately expands down below the bottom of the window. See the attached image (two screenshots combined).

I cannot figure it out.

Here's what's in the main html:

<div id="mainBx">
<div id="box"></div>
<div id="handle"></div>
</div>

Here's what's in the CSS:

#mainBx {
    position: relative;
    height: 200px;
  }

#box {
    background-color: transparent;
    border-style: solid;
    border-width: 1px;
    border-color: #000000 !important;
    display: flex;
  }

#handle {
    /* Disables panning and selecting on touch devices */
    touch-action: none;
    user-select: none;
    cursor: pointer !important;
    position: absolute;
    background-color: #43ba8e;
    width: 30px;
    height: 30px;
    left: 400px;
    top: 200px;
  }

Here's what's in the JS before body closing:

window.addEventListener('load', function() {
  'use strict';

  let handle = new PlainDraggable(document.getElementById('handle'));
  let box = document.getElementById('box');

  function resize() {
    let rect = box.getBoundingClientRect();
    box.style.width = handle.rect.right - rect.left + 'px';
    box.style.height = handle.rect.bottom - rect.top + 'px';
  };

  handle.onMove = resize;
  resize();

});

[anseki]

Hi @LetsHaveASquint, thank you for your comment.

So, you have to reproduce a matter to inspect any problem. I copied your code to JSFiddle on your behalf. https://jsfiddle.net/z5crj7am/ Then it seems to work fine. Could you explain about that? And, can you update this to reproduce the issue?

[anseki]

Also, what is the "responsive mode"? Do you mean that you specified viewport breaking in CSS for RWD (Responsive Web Design)?

[LetsHaveASquint]

Hi. Responsive mode when inspecting in the browser (to simulate other devices, screen sizes, etc.)

Thanks for putting it on Fiddle! I did not try because I didn't think it would help. The Fiddle does not reproduce my issue exactly, but I can use it do give you an idea.

In the Fiddle, change the #mainBx height to 600px and also the #handle top to 600px. Then Run.

It starts fine, but when you move the handle you'll see that the bottom of the box drops down.

[anseki]

I see. Maybe you are using Google Chrome, and Google Chrome has "Device Mode" in DevTools. You called "Device Mode" by "responsive mode". That's right? And, "Response Viewport Mode" in "Device Mode" in DevTools of Google Chrome is used for RWD.

Anyway, I updated the code for 600px on your behalf. And I fixed the code for scrollable viewport. https://jsfiddle.net/17dnuxbc/ The cause of this issue is "scroll value", it is not "responsive". Also, it is not only Y axis.

Note that those bear no relation to PlainDraggable. PlainDraggable is a library to allow HTML/SVG element to be dragged.

[LetsHaveASquint]

Yes. I think that solves it. Thanks! And thanks for the tutorial too.

[anseki]

:smile: