[Solved] slow rendering while dragging a div [closed]

by


I’m using http://threedubmedia.com/ instead of JQuery Ui for the drag/drop functionality. This solution can probably be replicated for JQuery Ui.

Solution:

$(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();
     });

Instead of using top/left for the effect of dragging, use translate. Using translate alone will make it look like there’s a delay because the translation is done over a period of time. Setting it to 0s will move it instantly and make the dragging seem seamless.

solved slow rendering while dragging a div [closed]