Is the dragging behavior of a rotated image different than that of the original image when using CSS rotation?

Question

Is the dragging behavior of a rotated image different than that of the original image when using CSS rotation?

While working on a CSS grid to showcase images rotated at 60 degrees for a diagonal view, I encountered an issue. I wanted users to have the ability to drag and drop images within the grid, but when they drag an image, it moves as if it weren't rotated at all. Note that I am not utilizing a canvas element, just a pure HTML element.

I have explored various methods to address this problem using jQuery, JavaScript, React JS, and CSS, but unfortunately, none of them provided a clean or effective solution. One idea I had was to recapture all the images in their rotated state, but this would be incredibly time-consuming due to the high volume of images involved.

The rotation of the image is achieved through CSS:

    behavior:url(-ms-transform.htc);
    /* Firefox */
    -moz-transform:rotate(315deg);
    /* Safari and Chrome */
    -webkit-transform:rotate(315deg);
    /* Opera */
    -o-transform:rotate(315deg);
    /* IE9 */
    -ms-transform:rotate(315deg);
    /* IE6,IE7 */
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);
    /* IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";

All I want is for users to be able to drag the image while maintaining its current rotation. Any assistance would be greatly appreciated.

javascript jquery reactjs css

Answer 1

Answer №1

One solution is to manage this through JavaScript:

You can override the browser's drag event, allowing your rotation CSS to remain intact.

ball.ondragstart = function() {
                return false;
                };

Here is the full drag and drop code:

<img src="./samyak/images/0.jpeg" style="cursor: pointer; position: absolute; z-index: 1000; left: 777px; top: 39px; transition: auto 0s ease 0s;" width="40" height="40" id="ball">
<script>
            ball = document.getElementById("ball");
            ball.style.transform="rotate(30deg)"
            ball.ondragstart = function() {
            return false;
            };
            ball.onmousedown = function(event) { // (1) start the process

            // (2) prepare to moving: make absolute and on top by z-index
            ball.style.position = 'absolute';
            ball.style.zIndex = 1000;
            // move it out of any current parents directly into body
            // to make it positioned relative to the body
            document.body.append(ball);
            // ...and put that absolutely positioned ball under the cursor

            moveAt(event.pageX, event.pageY);

            // centers the ball at (pageX, pageY) coordinates
            function moveAt(pageX, pageY) {
            ball.style.left = pageX - ball.offsetWidth / 2 + 'px';
            ball.style.top = pageY - ball.offsetHeight / 2 + 'px';
            }

            function onMouseMove(event) {
            moveAt(event.pageX, event.pageY);
            }

            // (3) move the ball on mousemove
            document.addEventListener('mousemove', onMouseMove);

            // (4) drop the ball, remove unneeded handlers
            ball.onmouseup = function() {
            document.removeEventListener('mousemove', onMouseMove);
            ball.onmouseup = null;
            };

        }
</script>

Answer 2

One solution is to manage this through JavaScript:

You can override the browser's drag event, allowing your rotation CSS to remain intact.

ball.ondragstart = function() {
                return false;
                };

Here is the full drag and drop code:

<img src="./samyak/images/0.jpeg" style="cursor: pointer; position: absolute; z-index: 1000; left: 777px; top: 39px; transition: auto 0s ease 0s;" width="40" height="40" id="ball">
<script>
            ball = document.getElementById("ball");
            ball.style.transform="rotate(30deg)"
            ball.ondragstart = function() {
            return false;
            };
            ball.onmousedown = function(event) { // (1) start the process

            // (2) prepare to moving: make absolute and on top by z-index
            ball.style.position = 'absolute';
            ball.style.zIndex = 1000;
            // move it out of any current parents directly into body
            // to make it positioned relative to the body
            document.body.append(ball);
            // ...and put that absolutely positioned ball under the cursor

            moveAt(event.pageX, event.pageY);

            // centers the ball at (pageX, pageY) coordinates
            function moveAt(pageX, pageY) {
            ball.style.left = pageX - ball.offsetWidth / 2 + 'px';
            ball.style.top = pageY - ball.offsetHeight / 2 + 'px';
            }

            function onMouseMove(event) {
            moveAt(event.pageX, event.pageY);
            }

            // (3) move the ball on mousemove
            document.addEventListener('mousemove', onMouseMove);

            // (4) drop the ball, remove unneeded handlers
            ball.onmouseup = function() {
            document.removeEventListener('mousemove', onMouseMove);
            ball.onmouseup = null;
            };

        }
</script>

Is the dragging behavior of a rotated image different than that of the original image when using CSS rotation?

Answer №1

Similar questions

Position the table at the bottom of the page using CSS

Dynamically Adding Filenames in Vue.js with v-for Iteration

Display a modal across all pages by incorporating a button component, regardless of its placement

PHP for Calculating Time to Percentage

Having trouble resolving a setInterval problem with JavaScript?

Evaluating the similarity between a Guild ID and a matching string

Is it possible to conditionally redirect using Vue router?

The jQuery prop method seems to be malfunctioning

CSS animations are not running as expected

Three.js: Spherical boundary of an object that has been resized

Vanishing Submit Button with CSS

Extract the text and value from an asp.net treeview by utilizing jQuery or JavaScript

Typescript indicates that an object may be potentially null

BOOTSTRAP: changing the layout of panels in various sizes for mobile devices

Transferring data between modules in nodejs

"Following successful POST login and session storage in MongoDB, the session is unable to be accessed due

I noticed that my react-native application is fetching data directly from the git master URL instead of pulling from an npm version

Executing a jQuery code within a WordPress theme

What are the ways to enable VS Code's Intellisense to collaborate with AngularJS's injected services?

Saving a jimp resized image in a mongoDb database: A step-by-step guide