拖动 div 时渲染缓慢

Question

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

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

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

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

PS 我知道这是一个 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>

Answer 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。单独使用 translate 会使它看起来像是有延迟，因为翻译是在一段时间内完成的。将其设置为 0 将立即移动它并使拖动看起来无缝。