javascript - 当我拖动一个用css旋转过的图像时，它会以非旋转方式拖动(原始)？

Question

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

我尝试研究使用以下方法之一解决此问题的方法: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)";

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

Answer 1

你可以通过 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>