Webkit 和 jQuery 可拖动跳转

IT技术 javascript jquery css webkit
2021-03-08 02:47:56

作为一个实验,我创建了一些 div 并使用 CSS3 旋转它们。

    .items { 
        position: absolute;
        cursor: pointer;
        background: #FFC400;
        -moz-box-shadow: 0px 0px 2px #E39900;
        -webkit-box-shadow: 1px 1px 2px #E39900; 
        box-shadow: 0px 0px 2px #E39900;
        -moz-border-radius: 2px; 
        -webkit-border-radius: 2px;
        border-radius: 2px;
    }

然后我随机设置它们的样式并通过 jQuery 使它们可拖动。

    $('.items').each(function() {
        $(this).css({
            top: (80 * Math.random()) + '%',
            left: (80 * Math.random()) + '%',
            width: (100 + 200 * Math.random()) + 'px',
            height: (10 + 10 * Math.random()) + 'px',
            '-moz-transform': 'rotate(' + (180 * Math.random()) + 'deg)',
            '-o-transform': 'rotate(' + (180 * Math.random()) + 'deg)',
            '-webkit-transform': 'rotate(' + (180 * Math.random()) + 'deg)',
        });
    });

    $('.items').draggable();

拖动有效,但我注意到仅在 webkit 浏览器中拖动 div 时突然跳转,而在 Firefox 中一切正常。

如果我删除position: absolute样式,“跳跃”就更糟了。我认为 webkit 和 gecko 之间的转换原点可能有所不同,但默认情况下它们都位于元素的中心。

我已经四处搜索了,但只得到了关于滚动条或可排序列表的结果。

这是我的问题的工作演示。尝试在 Safari/Chrome 和 Firefox 中查看它。http://jsbin.com/ucehu/

这是 webkit 中的错误还是浏览器如何呈现 webkit?

6个回答

作为@David Wick 的回答,我绘制了一张图像来指示在不同浏览器上旋转后的偏移量。

旋转后偏移

如果您不想修补或修改 jquery.ui.draggable.js,这里是要修复的代码

$(document).ready(function () {
    var recoupLeft, recoupTop;
    $('#box').draggable({
        start: function (event, ui) {
            var left = parseInt($(this).css('left'),10);
            left = isNaN(left) ? 0 : left;
            var top = parseInt($(this).css('top'),10);
            top = isNaN(top) ? 0 : top;
            recoupLeft = left - ui.position.left;
            recoupTop = top - ui.position.top;
        },
        drag: function (event, ui) {
            ui.position.left += recoupLeft;
            ui.position.top += recoupTop;
        }
    });
});

或者你可以看演示

谢谢你,你解决了我最烦人的问题之一!
2021-04-17 02:47:56
完美,这个答案上面的monkeypatch 一直工作到最近版本的 UI (v10) 对我来说......这是一个很好的解决方案,谢谢!
2021-04-23 02:47:56
它就像一个魅力。您只是在拖动 : 功能后缺少一个括号。谢谢
2021-04-25 02:47:56
无需修改任何 jQuery 代码,真棒和 +1。
2021-05-06 02:47:56
谢谢,这拯救了我的一天。
2021-05-16 02:47:56

这是draggable依赖jqueryoffset()函数,offset()使用原生js函数的结果getBoundingClientRect()最终,这是 jquery 核心无法补偿与getBoundingClientRect(). Firefox 的版本会getBoundingClientRect()忽略 css3 转换(旋转),而 chrome/safari (webkit) 不会。

是该问题的说明。

一个hacky的解决方法:

替换jquery.ui.draggable.js 中的以下内容


//The element's absolute position on the page minus margins
this.offset = this.positionAbs = this.element.offset();


//The element's absolute position on the page minus margins
this.offset = this.positionAbs = { top: this.element[0].offsetTop, 
                                   left: this.element[0].offsetLeft };

最后一个monkeypatched您的版本jsbin

并且已经有一个未解决的问题:bugs.jquery.com/ticket/8362
2021-04-30 02:47:56
对我不起作用(下面不再修复)。但解决方法是旋转内部对象,并拖动他的父包装器。这样位置与旋转完全无关..
2021-05-10 02:47:56

大卫威克关于上面的总体方向是正确的,但计算正确的坐标比这更复杂。这是一个更准确的猴子补丁,基于 MIT 许可的 Firebug 代码,它应该适用于您拥有复杂 DOM 的更多情况:

而是替换:

    //元素在页面上的绝对位置减去边距
    this.offset = this.positionAbs = this.element.offset();

使用较少的hacky(确保获得整个内容;您需要滚动):

    //元素在页面上的绝对位置减去边距
    this.offset = this.positionAbs = getViewOffset(this.element[0]);

    函数getViewOffset(节点){
      var x = 0, y = 0, win = node.ownerDocument.defaultView || 窗户;
      如果(节点)addOffset(节点);
      返回{左:x,顶部:y};

      函数getStyle(节点){
        返回 node.currentStyle || // IE
               win.getComputedStyle(node, '');
      }

      函数 addOffset(节点){
        var p = node.offsetParent,样式,X,Y;
        x += parseInt(node.offsetLeft, 10) || 0;
        y += parseInt(node.offsetTop, 10) || 0;

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

          如果(p.nodeType == 1){
            var parentStyle = getStyle(p)
              , localName = p.localName
              , parent = node.parentNode;
            如果(parentStyle.position != '静态'){
              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;
              }
              否则 if (localName == 'BODY') {
                style = getStyle(node);
                x += parseInt(style.marginLeft, 10) || 0;
                y += parseInt(style.marginTop, 10) || 0;
              }
            }
            否则 if (localName == 'BODY') {
              x += parseInt(parentStyle.borderLeftWidth, 10) || 0;
              y += parseInt(parentStyle.borderTopWidth, 10) || 0;
            }

            而(p != 父母){
              x -= parseInt(parent.scrollLeft, 10) || 0;
              y -= parseInt(parent.scrollTop, 10) || 0;
              parent = parent.parentNode;
            }
            addOffset(p);
          }
        }
        别的 {
          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;
        }
      }
    }

遗憾的是 DOM 没有在本地公开这些计算。

我知道这是一个老问题,但我希望得到一些帮助。我遇到了类似的问题,我同时使用了您的代码和 David Wick 提交的代码。当我第一次拖动对象时,它们就像一个魅力,但是在我放下它并再次拖动后跳跃会继续。@ecmanaut 你知道怎么解决吗?
2021-04-29 02:47:56

@ecmanaut:很好的解决方案。感谢您的努力。为了帮助其他人,我将您的解决方案变成了猴子补丁。将以下代码复制到文件中。加载 jquery-ui.js 后包含文件如下:

<script src="javascripts/jquery/jquery.js"></script>
<script src="javascripts/jquery/jquery-ui.js"></script>

<!-- the file containing the monkey-patch to draggable -->
<script src="javascripts/jquery/patch_draggable.js"></script>

这是复制/粘贴到 patch_draggable.js 的代码:

function monkeyPatch_mouseStart() {
     // don't really need this, but in case I did, I could store it and chain
     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;
                }
              }
            }


                //Create and append the visible helper
                this.helper = this._createHelper(event);

                //Cache the helper size
                this._cacheHelperProportions();

                //If ddmanager is used for droppables, set the global draggable
                if($.ui.ddmanager)
                    $.ui.ddmanager.current = this;

                /*
                 * - Position generation -
                 * This block generates everything position related - it's the core of draggables.
                 */

                //Cache the margins of the original element
                this._cacheMargins();

                //Store the helper's css position
                this.cssPosition = this.helper.css("position");
                this.scrollParent = this.helper.scrollParent();

                //The element's absolute position on the page minus margins
            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: { //Where the click happened, relative to the element
                        left: event.pageX - this.offset.left,
                        top: event.pageY - this.offset.top
                    },
                    parent: this._getParentOffset(),
                    relative: this._getRelativeOffset() //This is a relative to absolute position minus the actual position calculation - only used for relative positioned helper
                });

                //Generate the original position
                this.originalPosition = this.position = this._generatePosition(event);
                this.originalPageX = event.pageX;
                this.originalPageY = event.pageY;

                //Adjust the mouse offset relative to the helper if 'cursorAt' is supplied
                (o.cursorAt && this._adjustOffsetFromHelper(o.cursorAt));

                //Set a containment if given in the options
                if(o.containment)
                    this._setContainment();

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

                //Recache the helper size
                this._cacheHelperProportions();

                //Prepare the droppable offsets
                if ($.ui.ddmanager && !o.dropBehaviour)
                    $.ui.ddmanager.prepareOffsets(this, event);

                this.helper.addClass("ui-draggable-dragging");
                //JWL: Hier vindt de jump plaats
                this._mouseDrag(event, true); //Execute the drag once - this causes the helper not to be visible before getting its correct position

                //If the ddmanager is used for droppables, inform the manager that dragging has started (see #5003)
                if ( $.ui.ddmanager ) $.ui.ddmanager.dragStart(this, event);

                return true;

     };

 }
monkeyPatch_mouseStart();
我收到一个错误:未捕获的类型错误:无法读取未定义的 jquery-ui.js:1298 的属性“偏移量”
2021-04-25 02:47:56
同样在这里 - 我想知道是否有人提出了上述更新。:'-(
2021-05-14 02:47:56

我更喜欢这种解决方法,因为它保留了原始处理程序
它删除了转换然后恢复它

$(document).ready(function(){

    // backup original handler
    var _mouseStart = $.ui.draggable.prototype._mouseStart;

    $.ui.draggable.prototype._mouseStart = function(event) {

        //remove the transform
        var transform = this.element.css('transform');
        this.element.css('transform', 'none');

        // call original handler
        var result = _mouseStart.call(this, event);

        //restore the transform
        this.element.css('transform', transform);

        return result;
    };
});

演示(从@Liao San-Kai jsbin 开始)

这很棒!我多年来一直在寻找这个;-)
2021-04-30 02:47:56