Question

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

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

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

我尝试过使用CSS转换和边距，但两者仍然呈现缓慢。我的问题是，有没有办法以某种方式制作拖动效果，以便浏览器在复杂的布局中更快地计算布局。

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

拖动div时渲染速度慢

1 个答案: