JQuery UI Sortable avec Défilement Horizontal se déplace tous les éléments vers le bas

Je veux permettre à l'utilisateur de trier les objets de gauche à droite avec une barre de défilement.

Les objets sont des boîtes avec HTML, tels que du texte, pas les images comme beaucoup d'autres exemples.

Le problème est que tant que l'utilisateur fait glisser l'un des objets, tous les autres décalent vers le bas pendant le déplacement.

Voici ce que j'ai:

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'
  });
})

J'ai essayé beaucoup de différents paramètres, et de gauche, certains d'entre eux en tant que commentaires.

Meilleure façon de voir le problème est ici: http://jsfiddle.net/francispotter/gtKtE/

Regardez jsfiddle.net/sP3UZ de stackoverflow.com/questions/2544143/...
Merci pour la réponse, mais qui ne traite pas le problème. Les exemples dans les liens que vous avez fournies utilise des float, ce qui est bien si vous voulez que les objets pour former une mosaïque de la grille. Je veux que les éléments ne soient disposées horizontalement, et pour la région de défilement gauche/droite pour s'adapter à tous les items. J'ai donc besoin d'utiliser display:inline-block.
J'ai été de jongler avec le code, et aussi loin que je peux dire Sortable n'a jamais été conçu pour être utilisé à l'horizontale. Je pense que l'espace créé dans le haut de votre DIVs est invisible de l'espace réservé DIV d'une certaine sorte, qui ne peut pas être supprimé sans changer l'INTERFACE utilisateur de jQuery code lui-même. Voir aussi bugs.jqueryui.com/ticket/6702

InformationsquelleAutor Francis Potter | 2011-09-01

18

Une solution que j'ai trouvé qui fonctionne SANS avoir à réécrire la bibliothèque d'interface utilisateur et est propre et css correctif:
```
.ui-sortable-placeholder {
  display: inline-block;
height: 1px;
}
```
- Je sais que c'était il y a un moment mais merci cela m'a aidé beaucoup À montrer ce que tu veux dire (et de prouver qu'il fonctionne), voici un mod de travail de l'OP fiddle jsfiddle.net/q4uze/3
InformationsquelleAutor Brent Smith
2

Cette réponse est sans doute trop tard pour vous aider, mais peut-être que cela aidera d'autres personnes dans la même situation. J'ai trouvé votre question il y a quelques jours que je suis en train de faire le même genre de chose pour permettre à un utilisateur de modifier l'ordre des "photos" à la une "bande de film". Le commentaire sur votre question, ce qui suggère l'utilisation de "flotter" plutôt que "inline-block" s'est avéré être la clé pour trouver la solution. Cela m'a conduit à l'utilisation d'une taille fixe DIV pour tenir le triable éléments, en évitant le changement de la hauteur causée par mot-emballage, puis ajouter une DIV extérieure avec overflow-x:scroll pour faire le défilement horizontal. Profitez-en!

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

Une réponse (pas très élégant, mais il fonctionne) proposé par un collègue est de mettre en float:left sur le point, puis:

$(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

Je sais que c'est un peu de la réponse tardive, mais j'ai eu des problèmes avec cela.
Le correctif pour moi était en train de changer
```
.removeClass("ui-sortable-helper")[0];
```
à
```
.removeClass("ui-sortable-helper").html('&nbsp;')[0];
```
à la ligne 659 dans l'actuelle version non compressée (v1.8.17).

J'espère que cela aide toujours pour vous en sortir.
- Merci pour la réponse. Je l'ai déplacé sur de ce projet (juste à gauche du bug là). Est-ce un patch qui devrait être soumise à JQuery lui-même?
- Oui, je suppose que c'est le patch, ce que j'ai essayé ce soit sur le plan horizontal et vertical sortable. Je vais le poster sur le site de jQuery UI ainsi.
- Au lieu de changer la source, vous pouvez utiliser le "démarrer" de rappel ainsi. start: function(event, ui) { ui.placeholder.html(' '); }. N'oubliez pas de joindre ce fichier à la fois de l'listes.
- Boo. Ne pas modifier les fichiers de base!
InformationsquelleAutor Bert ter Heide

Comme @BertterHeide donc fait observer à juste titre, la bon solution à ce problème est de modifier votre .sortable appel, ajoutant start: function(event, ui) { ui.placeholder.html(' '); }, comme suit:

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

InformationsquelleAutor random_user_name

Vous devez vous connecter pour publier un commentaire.