Is there a way to eliminate the transform style from a draggable element?

Question

Is there a way to eliminate the transform style from a draggable element?

I am looking to enhance the CDK drag and drop example by adding a preview of the dragged element with specific left and top positions, without utilizing the transform style.

HTML

<div class="example-boundary">
  <div class="example-box" cdkDragBoundary=".example-boundary" cdkDrag>
    I can only be dragged within the dotted container
  </div>
</div>

<button> Preview the dragged element </buttona>

TypeScript

import {Component} from '@angular/core';
import {CdkDrag} from '@angular/cdk/drag-drop';

/**
 * @title Drag&Drop boundary
 */
@Component({
  selector: 'cdk-drag-drop-boundary-example',
  templateUrl: 'cdk-drag-drop-boundary-example.html',
  styleUrls: ['cdk-drag-drop-boundary-example.css'],
  standalone: true,
  imports: [CdkDrag],
})
export class CdkDragDropBoundaryExample {}

Current state

During dragging, the element renders like this in the DOM

<div _ngcontent-ng-c2320506461="" class="example-boundary">
  <div _ngcontent-ng-c2320506461="" cdkdragboundary=".example-boundary" cdkdrag="" class="cdk-drag example-box" style="transform: translate3d(202px, -2px, 0px);">
I can only be dragged within the dotted container
 </div>
</div>

Expected result

Once the element is dragged and the preview button is clicked, it should display as follows.

<div class="example-boundary">
  <div class="example-box" style="left: 96.13%; top: 9.92%; display: block;">
   Now I can't be dragged, sorry
  </div>
</div>

This means that the transform style will be replaced by left and top positions for the preview element.

javascript css node.js draggable angular13

Answer 1

Answer №1

@angular/cdk/drag-drop utilizes the transform property internally to position the box. The usage of top, left, and position properties or the transform property is encapsulated within the package and can be achieved in both ways. If you have specific requirements for manipulating the top and left properties, you can either calculate them from the original element position and transform, or implement a drag function in pure JS.

Here is a version using pure JavaScript to achieve the desired functionality:

const box = document.querySelector('.example-box');
const boundary = document.querySelector(box.getAttribute('cdkDragBoundary') || '');
const posDisplay = document.querySelector('#pos');

const offset = {
  x: 0,
  y: 0
};

const onMouseMove = (e) => {
  e.preventDefault();
  const [cx, cy] = [e.clientX, e.clientY];
  const {
    width,
    height
  } = box.getBoundingClientRect();
  let top = cy - offset.y;
  let left = cx - offset.x;

  const {
    width: bw,
    height: bh
  } = boundary?.getBoundingClientRect();
  top = Math.min(top, (bh || innerHeight) - height);
  top = Math.max(top, 0);
  left = Math.min(left, (bw || innerWidth) - width);
  left = Math.max(left, 0);
  box.style.top = top + 'px';
  box.style.left = left + 'px';
  posDisplay.innerText = `left: ${left}px, top: ${top}px`;
};

box.onmousedown = e => {
  e.preventDefault();
  offset.x = e.clientX - box.offsetLeft;
  offset.y = e.clientY - box.offsetTop;
  window.onmousemove = onMouseMove;
  window.onmouseup = () => {
    window.onmousemove = null;
    window.onmouseup = null;
  };
}

.example-boundary {
  position: relative;
  border: 1px dotted gray;
  width: 80vw;
  height: 80vh;
  margin: 0 10vmin;
}

.example-box {
  position: absolute;
  width: 200px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid green;
  cursor: grab;
}

#pos {
  height: 50px;
  padding: 0 10px;
}

<p id="pos">left: 0, top: 0</p>
<div class="example-boundary">
  <div class="example-box" cdkDragBoundary=".example-boundary">
    I can only be dragged within the dotted container
  </div>
</div>

Answer 2

@angular/cdk/drag-drop utilizes the transform property internally to position the box. The usage of top, left, and position properties or the transform property is encapsulated within the package and can be achieved in both ways. If you have specific requirements for manipulating the top and left properties, you can either calculate them from the original element position and transform, or implement a drag function in pure JS.

Here is a version using pure JavaScript to achieve the desired functionality:

const box = document.querySelector('.example-box');
const boundary = document.querySelector(box.getAttribute('cdkDragBoundary') || '');
const posDisplay = document.querySelector('#pos');

const offset = {
  x: 0,
  y: 0
};

const onMouseMove = (e) => {
  e.preventDefault();
  const [cx, cy] = [e.clientX, e.clientY];
  const {
    width,
    height
  } = box.getBoundingClientRect();
  let top = cy - offset.y;
  let left = cx - offset.x;

  const {
    width: bw,
    height: bh
  } = boundary?.getBoundingClientRect();
  top = Math.min(top, (bh || innerHeight) - height);
  top = Math.max(top, 0);
  left = Math.min(left, (bw || innerWidth) - width);
  left = Math.max(left, 0);
  box.style.top = top + 'px';
  box.style.left = left + 'px';
  posDisplay.innerText = `left: ${left}px, top: ${top}px`;
};

box.onmousedown = e => {
  e.preventDefault();
  offset.x = e.clientX - box.offsetLeft;
  offset.y = e.clientY - box.offsetTop;
  window.onmousemove = onMouseMove;
  window.onmouseup = () => {
    window.onmousemove = null;
    window.onmouseup = null;
  };
}

.example-boundary {
  position: relative;
  border: 1px dotted gray;
  width: 80vw;
  height: 80vh;
  margin: 0 10vmin;
}

.example-box {
  position: absolute;
  width: 200px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid green;
  cursor: grab;
}

#pos {
  height: 50px;
  padding: 0 10px;
}

<p id="pos">left: 0, top: 0</p>
<div class="example-boundary">
  <div class="example-box" cdkDragBoundary=".example-boundary">
    I can only be dragged within the dotted container
  </div>
</div>

Answer 3

Answer №2

Summary:

I have created two functional examples that meet your requirements. Both examples calculate the top and left positions using a regular expression to capture groups 1 and 2:

transform:\s*translate3d\((.+?),(.+?),.+?\)

.

Cloned DOM: This approach clones the Angular-generated HTML and manually removes unwanted attributes.
Stored data: As per your request, this method stores DOM position, width, height, etc., in a variable and then renders it.

Method #1 (Cloned DOM)

This code snippet clones the Angular-generated HTML and deletes unnecessary attributes manually. More details can be found in the code comments.

If you simply need to re-render a dragged element elsewhere, I recommend this approach as it simplifies attribute management.

Typescript:

// Code here

HTML:

<!-- Code here -->

CSS:

// CSS here

Method #2 (Stored Data)

This method fulfills your specific requirements by storing DOM attributes and rendering them through iteration.

If you plan to customize individual items later on, this method would be more suitable than Method #1.

Typescript:

// Code here

HTML:

<!-- Code here -->

CSS:

// CSS here

Answer 4

Summary:

I have created two functional examples that meet your requirements. Both examples calculate the top and left positions using a regular expression to capture groups 1 and 2:

transform:\s*translate3d\((.+?),(.+?),.+?\)

.

Cloned DOM: This approach clones the Angular-generated HTML and manually removes unwanted attributes.
Stored data: As per your request, this method stores DOM position, width, height, etc., in a variable and then renders it.

Method #1 (Cloned DOM)

This code snippet clones the Angular-generated HTML and deletes unnecessary attributes manually. More details can be found in the code comments.

If you simply need to re-render a dragged element elsewhere, I recommend this approach as it simplifies attribute management.

Typescript:

// Code here

HTML:

<!-- Code here -->

CSS:

// CSS here

Method #2 (Stored Data)

This method fulfills your specific requirements by storing DOM attributes and rendering them through iteration.

If you plan to customize individual items later on, this method would be more suitable than Method #1.

Typescript:

// Code here

HTML:

<!-- Code here -->

CSS:

// CSS here

Answer 5

Answer №3

Modify the key to trigger a remount of the component.

 <Draggable  key={updatedKey}>   <div/> </Draggable>

Answer 6

Modify the key to trigger a remount of the component.

 <Draggable  key={updatedKey}>   <div/> </Draggable>

Is there a way to eliminate the transform style from a draggable element?

HTML

TypeScript

Current state

Expected result

Answer №1

Answer №2

Summary:

Method #1 (Cloned DOM)

Typescript:

HTML:

CSS:

Method #2 (Stored Data)

Typescript:

HTML:

CSS:

Answer №3

Similar questions

What is the method for setting up vertical tabs?

Using jQuery to toggle between open and closed states upon clicking

I've decided to create a new Angular app using Yeoman. I've noticed that there are more installed Node modules than what is listed in the package.json file. Is this typical

Deploying CSS/JS files in Magento 2 is a crucial

Generate a compressed file from a readable source, insert a new document, and transfer the output

Clickable tab to collapse a section containing an image and aligned text

The Karma testing feature in Angular Quickstart encounters issues right from the start

Is it possible to run Node and Apache on the same port concurrently?

Dynamic count down using JavaScript or jQuery

What causes the Element to be null in Vue.js?

Encountering a passport error in Node.js - how to troubleshoot and

Navigating through nested routes in Express.js and extracting parameters may seem daunting at first, but

Toggle the state of a Material UI checkbox in ReactJS based on the data from hooks that return a true or checked value

Modify the hue of the div as soon as a button on a separate webpage is

Link a YAML file with interfaces in JavaScript

The process of updating a nested object property in Redux and React

"The authentication cookie fields are not defined when trying to get the authentication in the Express framework

Expanding Vue JS Vuetify Panels in a V-for Loop to Reveal Multiple Panels

Switch up between two distinct colors every three elements using a single selector

Detect errors in the `valueChanges` subscription of Firestore and attempt a retry if an error occurs