Javascript 拖动div时渲染速度较慢

编辑：总体问题：对于布局复杂的页面，使用“上/左”设置拖动动画速度较慢

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

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

我尝试过使用CSS转换和边距，但它们的渲染速度仍然很慢。我的问题是，是否有任何方法可以使拖动效果在某种程度上使浏览器在复杂布局中更快地计算布局

另外，我知道这是一个CSS问题，因为当我删除一个core.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>

选择布局

我使用的是拖放功能，而不是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();
     });

---

使用“平移”，而不是使用“上/左”作为拖动效果。单独使用translate会使它看起来有延迟，因为翻译是在一段时间内完成的。将其设置为0s将立即移动，并使拖动看起来无缝。

我知道您的用户名是“LazyProgrammer”，但您需要提供一些代码供人们查看，以便他们能够帮助您。否则，任何人都能对这个问题做些什么？@LazyProgrammer“我知道这是一个CSS问题，因为当我删除一个核心.CSS文件时，拖放操作是正常的。”那么有问题的CSS呢&可能是一些连接到CSS的HTML元素。@JakeGould CSS非常大。。。文件本身是223KB，我不是页面的原始设计者，我只是在实现拖放。至于HTML，拖放部分的HTML不使用任何core.css类。这些类用于outter容器。@LazyProgrammer请给我们一些dragged@LazyProgrammer“…文件本身是223KB，我不是页面的原始设计者。”那么，你到底希望这里的任何人做什么？