时间戳

首页 > 解决方案 > 当我拖动已经用css旋转的图像时，它会以非旋转方式拖动（原始）？

javascript - 当我拖动已经用css旋转的图像时，它会以非旋转方式拖动（原始）？

问题描述

我正在制作一个 CSS 网格来显示图像，图像旋转 60 度以进行对角线查看。问题是我希望用户能够在网格中拖放图像以移动图像，但是当他们拖动图像时，它就像根本没有旋转一样拖动。注意：我没有使用画布元素，我使用的是纯元素。

我尝试使用以下方法之一研究解决此问题的方法：jQuery、Javascript、React JS、CSS，但没有找到任何干净/甚至有效的解决方案。我想过只是重新捕获所有旋转状态的图像，但这将永远花费我正在处理的图像数量。

我通过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)";

我只想让用户拖动图像，并让它在拖动时保持旋转到位。非常感谢任何帮助。

标签： javascriptjqueryreactjscss

解决方案

你可以通过 javascripts 处理 -

覆盖浏览器的拖动事件。这将使您的旋转 css 保留在那里。

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

完整的拖放代码 -

<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>

推荐阅读