Webkit und jQuery verschiebbare Sprünge

Question

Als Experiment habe ich ein paar Divs erstellt und sie mit CSS3 gedreht.

    .items { 
        position: absolute;
        cursor: pointer;
        background: #FFC400;
        -moz-box-shadow: 0px 0px 2px #E39900;
        -webkit-box-shadow: 1px 1px 2px #E39900; 
        box-shadow: 0px 0px 2px #E39900;
        -moz-border-radius: 2px; 
        -webkit-border-radius: 2px;
        border-radius: 2px;
    }

Dann habe ich sie nach dem Zufallsprinzip gestylt und mit jQuery verschiebbar gemacht.

    $('.items').each(function() {
        $(this).css({
            top: (80 * Math.random()) + '%',
            left: (80 * Math.random()) + '%',
            width: (100 + 200 * Math.random()) + 'px',
            height: (10 + 10 * Math.random()) + 'px',
            '-moz-transform': 'rotate(' + (180 * Math.random()) + 'deg)',
            '-o-transform': 'rotate(' + (180 * Math.random()) + 'deg)',
            '-webkit-transform': 'rotate(' + (180 * Math.random()) + 'deg)',
        });
    });

    $('.items').draggable();

Das Ziehen funktioniert, aber ich bemerke einen plötzlichen Sprung beim Ziehen der div's nur in Webkit-Browsern, während alles in Firefox in Ordnung ist.

Wenn ich die Position: absolut Stil ist das "Springen" noch schlimmer. Ich dachte, es war vielleicht ein Unterschied in der Transformation Ursprung zwischen Webkit und Gecko, aber sie sind beide in der Mitte des Elements standardmäßig.

Ich habe schon herumgesucht, aber ich habe nur Ergebnisse über Bildlaufleisten oder sortierbare Listen gefunden.

Hier ist ein funktionierendes Beispiel für mein Problem. Versuchen Sie, es sowohl in Safari/Chrome als auch in Firefox zu sehen. http://jsbin.com/ucehu/

Ist dies ein Fehler in Webkit oder wie die Browser Webkit rendern?

Answer 1

Die Antwort von David Wick war sehr hilfreich... danke... hier habe ich den gleichen Workaround für die resizeable codiert, weil es das gleiche Problem hat:

suchen Sie nach folgenden Informationen in jquery.ui.resizable.js

var o = this.options, iniPos = this.element.position(), el = this.element;

und ersetzen durch:

var o = this.options, iniPos = {top:this.element[0].offsetTop,left:this.element[0].offsetLeft}, el = this.element;

Answer 2

Ich habe viele der Lösungen verwendet, um das Ziehen richtig zum Laufen zu bringen. ABER, es reagierte immer noch falsch auf eine Dropzone (wie es nicht gedreht wurde). Die Lösung ist wirklich einen übergeordneten Container zu verwenden, die relativ positioniert ist.

Das hat mir soooo viel Zeit erspart.

<div id="drawarea">
    <div class="rect-container h">
        <div class="rect"></div>
    </div>
</div> 

.rect-container {
    position:relative; 
}

Vollständige Lösung hier (sie ist nicht von mir): http://jsfiddle.net/Sp6qa/2/

Außerdem habe ich viel recherchiert. Und es ist einfach so, jQuery hat keine Pläne, dieses aktuelle Verhalten in der Zukunft zu ändern. Alle eingereichten Tickets zu diesem Thema wurden geschlossen. Also fangen Sie einfach mit Elterncontainern an, die relativ positioniert sind. Es funktioniert wie ein Charme und sollte zukunftssicher sein.

Answer 3

Sie müssen den übergeordneten Container des verschiebbaren Elements auf "Position: relativ" setzen.