JQuery UI Sortable mit der Horizontale Bildlauf wird das verschieben aller Elemente nach unten

Möchte ich es dem Benutzer erlauben das Sortieren von Objekten von Links-nach-rechts mit einem scroll-bar.

Objekte sind Boxen mit HTML in Ihnen, einschließlich text, keine Bilder, wie viele andere Beispiele.

Das problem ist, dass der Benutzer eines der Objekte, alle anderen verschieben nach unten beim ziehen.

Hier ist, was ich habe:

HTML:

<div id="parent" class="parent">
  <div id="list" class="list">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
  </div>
</div>

CSS:

.parent {
  height:64px;
  width:280px;
}
.list {
  background-color:#d0d0d0;
  white-space:nowrap;
  overflow-x:scroll;
  overflow-y:hidden;
  /*text-align:left;*/
}
.item {
  background-color:#404040;
  height:40px;
  width:100px;
  margin:4px;
  cursor:pointer;
  display:inline-block;
  /*float:left;*/
  /*float:none;*/
  /*clear:both;*/
}
.placeholder {
  height:40px;
  width:20px;
  display:inline-block;
  margin:4px;
}

Javascript:

$(function() {
  $('#list').disableSelection().sortable({
    scroll: true,
    placeholder: 'placeholder',
    //containment:'parent',
    axis: 'x'
  });
})

Habe ich versucht viele verschiedene Einstellungen, und verlassen einige von Ihnen als Kommentare.

Beste Weg, um zu sehen, das problem ist hier: http://jsfiddle.net/francispotter/gtKtE/

Look at jsfiddle.net/sP3UZ von stackoverflow.com/questions/2544143/...
Danke für die Antwort, aber das hilft nicht, das problem anzugehen. Die Beispiele in den links, die Sie zur Verfügung gestellt verwendet schweben, das ist in Ordnung, wenn Sie wollen, dass die Objekte bilden ein gefliestes raster. Ich will, dass die Objekte nur horizontal angeordnet, und für die region zu scrollen, Links/rechts, um Platz für die items. Also ich display:inline-block.
Ich habe schon hantieren mit dem code, und soweit ich sagen kann, Sortierbar wurde nie entwickelt, um verwendet werden, horizontal. Ich denke, dass die Lücke an der Spitze der DIVs ist ein unsichtbarer Platzhalter-DIV von einer Art, die nicht entfernt werden kann, ohne änderung der jQuery UI-code selbst. Siehe auch bugs.jqueryui.com/ticket/6702

InformationsquelleAutor Francis Potter | 2011-09-01

18

Einer Lösung, die ich gefunden, die funktioniert, OHNE zu schreiben, die ui-library und ist eine saubere und css-Update:
```
.ui-sortable-placeholder {
  display: inline-block;
height: 1px;
}
```
- Ich weiß, das war eine Weile her, aber vielen Dank - das hat mir sehr geholfen, um Zu zeigen, was du meinst (und beweisen, dass es funktioniert), hier ist eine funktionierende mod der OP ' s fiddle jsfiddle.net/q4uze/3
InformationsquelleAutor Brent Smith
2

Diese Antwort ist wohl zu spät, um Ihnen zu helfen, aber vielleicht hilft es anderen in der gleichen situation. Ich fand deine Frage vor ein paar Tagen, wie ich versucht bin zu tun, die gleiche Art von Sache, um die es einem Benutzer erlauben, neu zu ordnen "Fotos" auf ein "film-strip". Der Kommentar auf Ihre Frage, was der Einsatz von "float" statt "inline-block" erwies sich als Schlüssel bei der Suche nach der Lösung. Dies führte mich zu der mittels einer festen Größe DIV zu halten, der zu sortierenden Elemente, die Vermeidung der Höhenänderung verursacht durch Zeilenumbruch, dann Zugabe von einem äußeren DIV mit overflow-x:scroll zu tun, das horizontale scrollen. Genießen Sie!

https://jsfiddle.net/kmbro/y8ccza34/

HTML
```
<div id='scrollable'>
<div id='sortable'>
<div class='item'>Block A</div>
<div class='item'>Block B</div>
<div class='item'>Block C</div>
<div class='item'>Block D</div>
</div>
</div>
```
CSS
```
#scrollable {
  overflow-x: scroll;
}

#sortable {
  border: dashed green;
  border-width: 6px 0;
  padding: 4px 0;
  background-color: yellow;
  height: 150px;
  width:calc(4 * 200px + 1px); //1px for dragging
}

.item {
  float: left;
  height: 100%;
  width: 200px;
  box-sizing: border-box; /* keep padding/border inside height/width */
  border: solid green 4px;
  background-color: white;
}
```
jQuery-2.1.3 /jQuery-UI-1.11.4
```
$('#sortable').sortable({
axis: 'x',
});
```
InformationsquelleAutor kbro

Einer Antwort (nicht elegant, aber es funktioniert) vorgeschlagen, von einem Kollegen ist, um float:left auf den Artikel, dann:

$(function() {
  $('#list').disableSelection().sortable({
    scroll: true,
    axis: 'x',
    create: function(event, ui) {
        var $e = $(event.target);
        var width = 0;
        $e.children().each(function(){
            width += $(this).outerWidth(true);
        });
        $e.width(width);
    }
  });
})

InformationsquelleAutor Francis Potter

1

Ich weiß, das ist eine späte Antwort, aber ich habe Probleme mit diesem als gut.
Das Update war für mich ändern
```
.removeClass("ui-sortable-helper")[0];
```
zu
```
.removeClass("ui-sortable-helper").html('&nbsp;')[0];
```
in Zeile 659 in der aktuellen unkomprimierte version (v1.8.17).

Ich hoffe, dass dies noch hilft.
- Danke für die Antwort. Ich habe auf bewegt von diesem Projekt (nur Links der bug drin). Ist das ein patch, der übermittelt werden sollte JQuery selbst?
- Ja, ich denke, dies ist der patch, als ich versuchte, dies sowohl in der horizontalen und vertikalen sortierbar. Ich poste es auf der jQuery UI-Website als gut.
- Anstelle der änderung der Quelle, können Sie die 'start' - callback als gut. start: function(event, ui) { ui.placeholder.html(' '); }. Vergessen Sie nicht, bringen Sie diese auf beiden der verbundenen Listen.
- Boo. Ändern Sie nicht die core-Dateien!
InformationsquelleAutor Bert ter Heide

Als @BertterHeide so ganz richtig kommentierte, die richtige Lösung für dieses Problem ist die Anpassung des .sortable Anrufs, hinzufügen von start: function(event, ui) { ui.placeholder.html(' '); } wie folgt:

$(function() {
  $('#list').disableSelection().sortable({
    scroll: true,
    placeholder: 'placeholder',
    start: function(event, ui) { ui.placeholder.html('&nbsp;'),
    //containment:'parent',
    axis: 'x'
  });
})

InformationsquelleAutor cale_b

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.