拖动 div 时渲染缓慢 [关闭]答案

【问题标题】：slow rendering while dragging a div [closed]拖动 div 时渲染缓慢 [关闭]
【发布时间】：2014-06-13 15:35:52
【问题描述】：

编辑： 总体问题：对于布局复杂的页面，使用顶部/左侧动画拖动速度很慢。

我正在使用大量 CSS 的页面上实现拖放功能。当我去测试它时，“克隆”的 dom 对象的拖动非常缓慢，所以我开始弄清楚为什么会这样。我知道这与布局有关，因此经过几个小时的挖掘，我发现是浏览器对克隆的拖动对象的渲染速度很慢，而不是 javascript 计算。

我认为它慢的原因是，因为布局非常复杂，每次拖动时顶部和左侧都会发生变化，浏览器需要更长的时间来渲染拖动的对象。（这只是猜测。如果我错了，请纠正我）

我尝试过使用 CSS 变换和边距，但两者的渲染速度仍然很慢。我的问题是，有没有什么办法可以让拖拽效果在某种方式下让浏览器在复杂的布局中更快地计算布局。

附：我知道这是一个 CSS 问题，因为当我删除其中一个核心 .css 文件时，拖放操作很好。

可拖动项目的Div。

<div class="pane pane-l pane-25">
    <div class="sticky sticky-nav arrow_box">
        <div id="accordion" class="s-accordion">
            <h3>Choose Layout</h3>
            <div>
                <ul class="panel-nav panel-nav-layout">
                    <li><a href="" class="s-draggable"><img src="" width="45" height="45"><span>A</span></a></li>
                    <li><a href="" class="s-draggable"><img src="" width="45" height="45"><span>B</span></a></li>
                    <li><a href="" class="s-draggable"><img src="" width="45" height="45"><span>C</span></a></li>
                    <li><a href="" class="s-draggable"><img src="" width="45" height="45"><span>D</span></a></li>
                    <li><a href="" class="s-draggable"><img src="" width="45" height="45"><span>E</span></a></li>
                    <li><a href="" class="s-draggable"><img src="" width="45" height="45"><span>F</span></a></li>
                    <li><a href="" class="s-draggable"><img src="" width="45" height="45"><span>G</span></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

我知道您的用户名是“LazyProgrammer”，但您需要提供一些代码供人们查看，以便他们为您提供帮助。否则，任何人都可以解决这个问题吗？
@LazyProgrammer “我知道这是一个 CSS 问题，因为当我删除其中一个核心 .css 文件时，拖放就可以了。”那么有问题的 CSS 以及可能与 CSS 相关的一些 HTML 元素呢？
@JakeGould css 相当大......文件本身是 223KB，我不是页面的原始设计者，我只是实现拖放。至于 HTML，拖放部分的 HTML 不使用任何 core.css 类。这些类用于外部容器。
@LazyProgrammer 请给我们拖动的东西的 HTML
@LazyProgrammer “……文件本身是 223KB，我不是该页面的原始设计者。”那你到底想让这里的人做什么？

标签： javascript html css draggable drag

【解决方案1】：

我使用http://threedubmedia.com/ 代替JQuery Ui 来实现拖放功能。这个解决方案可能可以复制到 JQuery Ui。

解决方案：

$(div).drag("start", function( ev, dobj) {
        return $( this ).clone()
            .css({
                opacity: .75,
                position: 'absolute',
                zIndex: 9999,
                top: dobj.offsetY,
                left: dobj.offsetX
            }).appendTo( $('body'));
    })
    .drag(function( ev, dobj ){
        $( dobj.proxy ).css({
            "transform": "translate(" + dobj.deltaX + "px," + dobj.deltaY + "px)",
            "transition": "0s"
        });
    })
    .drag("end",function( ev, dobj ){
        $( dobj.proxy ).remove();
     });

不要使用 top/left 来实现拖动效果，而是使用 translate。单独使用翻译会使它看起来有延迟，因为翻译是在一段时间内完成的。将其设置为 0 将立即移动它并使拖动看起来无缝。

【讨论】：