拖动和调整CSS转换元素的大小

Question

例如,如果我们-vendor-transform: rotate(40deg)在矩形上设置一个 css属性<div>,所有突然拖动和调整大小都会变得非常奇怪和有缺陷.

这是一个简单的jQueryUI示例:http://jsfiddle.net/Ja4dY/1/

您会注意到,如果在转换时拖动或调整该矩形的大小,它将向上或向下跳跃,并且光标将不会保留在正确的位置.在我的真实代码中,我使用自定义代码来调整大小和拖动,但是我遇到了同样的问题.

当然,"问题"是元素的方向会发生变化.因此,左可右,上得底部和其间的东西和JavaScript代码仍然处理,因为它会在每个方向不会改变.

那么,问题是:我们如何补偿变换/旋转元素？

任何好的资源/书籍/博客也非常受欢迎.

Answer 1

您可以使用getComputedStyle()获取应用于元素的当前变换矩阵.您可以使用此选项将当前鼠标位置转换为其在变换空间中的位置,并查看单击/拖动事件是否在元素边界和/或角落内.良好的资源:

http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/

顺便说一句,正如您所经历的那样,这对代码来说并非易事.我们不得不为Sencha Animator做这件事,而且它是一头野兽.

Answer 2

问题是使用jQuery UI使元素可拖动的getBoundingClientRect()函数在很大程度上依赖于本机函数来确定元素的位置等.

当应用CSS3变换(如旋转)时,jQuery UI中使用的值getBoundingClientRect()或等价jQuery offset()函数不再按预期工作,并且鼠标指针的位置变得混乱,因为元素的大小在旋转后突然错误.

要修复它,你需要添加一些重新计算值的辅助函数,并且有一个可用于此的猴子补丁适用于jQuery UI的draggable.

很难说如何为自定义代码制作相同的补丁,但你可能不得不以某种方式将它集成到你的自定义函数中,并且你需要编写一些代码,而且更难以提出对于自定义代码没有看到的开箱即用的辅助函数,并且要注意它是参与进行这些计算,请参阅下面的代码:

function monkeyPatch_mouseStart() {
     var oldFn = $.ui.draggable.prototype._mouseStart ;
     $.ui.draggable.prototype._mouseStart = function(event) {

            var o = this.options;

           function getViewOffset(node) {
              var x = 0, y = 0, win = node.ownerDocument.defaultView || window;
              if (node) addOffset(node);
              return { left: x, top: y };

              function getStyle(node) {
                return node.currentStyle || // IE
                       win.getComputedStyle(node, '');
              }

              function addOffset(node) {
                var p = node.offsetParent, style, X, Y;
                x += parseInt(node.offsetLeft, 10) || 0;
                y += parseInt(node.offsetTop, 10) || 0;

                if (p) {
                  x -= parseInt(p.scrollLeft, 10) || 0;
                  y -= parseInt(p.scrollTop, 10) || 0;

                  if (p.nodeType == 1) {
                    var parentStyle = getStyle(p)
                      , localName   = p.localName
                      , parent      = node.parentNode;
                    if (parentStyle.position != 'static') {
                      x += parseInt(parentStyle.borderLeftWidth, 10) || 0;
                      y += parseInt(parentStyle.borderTopWidth, 10) || 0;

                      if (localName == 'TABLE') {
                        x += parseInt(parentStyle.paddingLeft, 10) || 0;
                        y += parseInt(parentStyle.paddingTop, 10) || 0;
                      }
                      else if (localName == 'BODY') {
                        style = getStyle(node);
                        x += parseInt(style.marginLeft, 10) || 0;
                        y += parseInt(style.marginTop, 10) || 0;
                      }
                    }
                    else if (localName == 'BODY') {
                      x += parseInt(parentStyle.borderLeftWidth, 10) || 0;
                      y += parseInt(parentStyle.borderTopWidth, 10) || 0;
                    }

                    while (p != parent) {
                      x -= parseInt(parent.scrollLeft, 10) || 0;
                      y -= parseInt(parent.scrollTop, 10) || 0;
                      parent = parent.parentNode;
                    }
                    addOffset(p);
                  }
                }
                else {
                  if (node.localName == 'BODY') {
                    style = getStyle(node);
                    x += parseInt(style.borderLeftWidth, 10) || 0;
                    y += parseInt(style.borderTopWidth, 10) || 0;

                    var htmlStyle = getStyle(node.parentNode);
                    x -= parseInt(htmlStyle.paddingLeft, 10) || 0;
                    y -= parseInt(htmlStyle.paddingTop, 10) || 0;
                  }

                  if ((X = node.scrollLeft)) x += parseInt(X, 10) || 0;
                  if ((Y = node.scrollTop))  y += parseInt(Y, 10) || 0;
                }
              }
            }

                this.helper = this._createHelper(event);
                this._cacheHelperProportions();

                if($.ui.ddmanager)
                    $.ui.ddmanager.current = this;

                this._cacheMargins();

                this.cssPosition = this.helper.css("position");
                this.scrollParent = this.helper.scrollParent();

            this.offset = this.positionAbs = getViewOffset(this.element[0]);
                this.offset = {
                    top: this.offset.top - this.margins.top,
                    left: this.offset.left - this.margins.left
                };

                $.extend(this.offset, {
                    click: {
                        left: event.pageX - this.offset.left,
                        top: event.pageY - this.offset.top
                    },
                    parent: this._getParentOffset(),
                    relative: this._getRelativeOffset()
                });

                this.originalPosition = this.position = this._generatePosition(event);
                this.originalPageX = event.pageX;
                this.originalPageY = event.pageY;

                (o.cursorAt && this._adjustOffsetFromHelper(o.cursorAt));

                if(o.containment)
                    this._setContainment();

                if(this._trigger("start", event) === false) {
                    this._clear();
                    return false;
                }

                this._cacheHelperProportions();

                if ($.ui.ddmanager && !o.dropBehaviour)
                    $.ui.ddmanager.prepareOffsets(this, event);

                this.helper.addClass("ui-draggable-dragging");
                this._mouseDrag(event, true);

                if ( $.ui.ddmanager ) $.ui.ddmanager.dragStart(this, event);
                return true;
     };
 }
monkeyPatch_mouseStart();

这里有一个FIDDLE显示它正常运行jQuery UI的可拖动和可调整大小!

Answer 3

我找到了这个...这是一个工作示例加上信息,演示和下载链接.

jquery-ui-rotation-using-css-transform - > live-demo

他使用自己的图书馆,但如果你对这个主题感兴趣,你可以阅读并了解他是如何得到它的.

欢呼和祝你好运.

Gmo.-

顺便说一句,网络是俄语,但谷歌翻译你可以管理;-)