Question

我需要能够在拖动两个处理程序时重新调整div的大小。

请使用以下链接

单击绿色框，拖动橙色框后，脚本正常工作，绿色框重新调整大小。

将CSS旋转应用于绿色框时出现问题，例如：

http://output.jsbin.com/zirugeroju/1/

正如您所注意到的那样，用户正在拖动相反的旋钮。

这里有什么问题以及如何解决？
欢迎使用jQuery的更好解决方案

 resize: function (handler, event) {
                if (event.clientX <= 0) { // cover bug
                    return;
                }
                var elm = document.getElementById(this.config.elm);
                switch (handler) {
                    case 'tl':
                        // x
                        var marginR = elm.offsetLeft + elm.clientWidth,
                            newW = marginR - event.clientX,
                            xPos = event.clientX;
                        elm.style.left = xPos + 'px';
                        elm.style.width = newW + 'px';
                        // y
                        var marginT = elm.offsetTop + elm.clientHeight,
                            newH = marginT - event.clientY,
                            yPos = event.clientY;

                        elm.style.top = yPos + 'px';
                        elm.style.height = newH + 'px';
                        this.setPositionHandlers();
                        break;
                    case 'tr':
                        break;
                    case 'bl':
                        break;
                    case 'br':
                        var newW = event.clientX - this.config.x,
                            newH = event.clientY - this.config.y;
                        elm.style.width = newW + 'px';
                        elm.style.height = newH + 'px';
                        this.setPositionHandlers();
                        break;
                }
            },

Answer 1

我认为你可以添加：

-webkit-transform-origin: left top;

在#target上，以避免左上角的橙色处理程序。

#target {
    background-color: lightgreen;
    -ms-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -webkit-transform-origin: left top;
    transform: rotate(10deg);
}

如何在拖动时调整div的大小？ [轮换问题]

1 个答案: