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

Question

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

请使用以下链接

http://jsbin.com/lopumaheyu/1/

点击绿色方框，拖动橙色方框后，脚本正常运行，绿色方框大小调整。

我在将 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 上避免左上角橙色处理程序上的小 swift。

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