jQueryUI Sortierbar Element Falschen Position, Während Sie Ziehen

Habe ich ein jQueryUI sortierbare Liste enthält drei bootstrap Paneele, Paneele 1 und 2 beginnen Sie, mit den richtigen, ursprünglichen Positionen, aber wenn Sie versuchen, ziehen Sie panel 3 es fällt unter panel 1 offset vom cursor. Live demo

HTML

<ul id="sortable">
    <li class="col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading ui-sortable-handle">1</div>
            <div class="panel-body"></div>
        </div>
    </li>
    <li class="col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading ui-sortable-handle">2</div>
            <div class="panel-body"></div>
        </div>
    </li>
    <li class="col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading ui-sortable-handle">3</div>
            <div class="panel-body"></div>
        </div>
    </li>
</ul>

JavaScript

$('#sortable').sortable({
    tolerance: 'pointer',
    handle: '.panel-heading',
    placeholder: 'col-xs-4 panel-al-placeholder',
    start: function (e, ui) {
        ui.placeholder.height(ui.item.children().height());
    }
});

CSS

ul {
    width: 650px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.panel-al-placeholder {
    margin-bottom: 18px;
    border:2px solid #f8e287;
    background:#fef9e7
}

in welchen browser Sie dieses zu testen? in chrome deinen jsfiddle ist die richtigen left position für alle 3 panels
Wie es scheint, passiert nur, wenn der container eine bestimmte Größe haben, überprüfen Sie heraus dieses Geige
es scheint zu passieren, nur mit width: 650px, obwohl ich nicht weiß, warum: Geige. Ihre Geige link nicht aktualisiert wurde, durch die Art und Weise.
Es passiert in der 650 - 680 - 710 alle 30px + or -
Ich habe versucht, diese mit einer älteren version von jQuery und es scheint gut zu funktionieren, dann. Geige.
$("body").css("überlauf", "auto"); das funktionierte für mich

InformationsquelleAutor Kyle Needham | 2014-04-16

23

Ich hatte ein ähnliches problem, die Helfer, um den Klon-Modus funktionierte für mich:
```
$('#sortable').sortable({
    helper: 'clone'
});
```
- Gute Idee, ich glaube nicht daran, das zu tun.
- Ich wusste nicht, über eine solche Funktion und Helfer. Großes wissen zu erlernen. Gelöst meine sortierbar ui-problem.
InformationsquelleAutor jodeci

Ich hatte das gleiche problem. Ich habe in der Vergangenheit festgestellt, dass die CSS-style - box-sizing: border-box; dass bootstrap setzt globaly verursachen können Probleme mit einigen javascript-Bibliotheken, und es stellte sich heraus, dass das Problem in diesem Fall, so weit ich erzählen kann. Ich habe einen quick-fix, setzt die box-sizing zurück zu den CSS2-Standard box-sizing: content-box; für die Spalten.

Leider spielt Verwüstung mit der Spalten-layout in der bootstrap-da das Auffüllen der Spalten wird nun auf die prozentuale Breite, so dass unser 3-Spalten sind am Ende breiter als 100%. Für mein code, ich wollte eigentlich nicht brauchen keine Polsterung zwischen meinen Spalten, so dass ich nur einen negativen margin auf meine Kolumnen zum Ausgleich der zusätzlichen Breite.

Weitere Informationen über die box-sizing CSS-Eigenschaft: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Live-demo

HTML

<ul id="sortable">
    <li class="col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading ui-sortable-handle">1</div>
            <div class="panel-body"></div>
        </div>
    </li>
    <li class="col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading ui-sortable-handle">2</div>
            <div class="panel-body"></div>
        </div>
    </li>
    <li class="col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading ui-sortable-handle">3</div>
            <div class="panel-body"></div>
        </div>
    </li>
</ul>

Javascript

$('#sortable').sortable({
    tolerance: 'pointer',
    handle: '.panel-heading',
    start: function (e, ui) {
        ui.placeholder.height(ui.item.children().height());
    }
});

CSS

ul {
    width: 650px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.col-xs-4 {
    box-sizing: content-box;
    margin: 10px -16px;
}
.panel-al-placeholder {
    margin-bottom: 18px;
    background:#fef9e7
}

Ihre Geige, das funktioniert, wenn ich kopiere es in ein leeres laravel.Klinge es vermasselt.. :/

InformationsquelleAutor lakerz

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.