JQuery UI Sortable avec défilement horizontal déplace tous les éléments vers le bas

Question

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

Les objets sont des boîtes contenant du HTML, y compris du texte, et non des images comme dans les autres exemples.

Le problème est que lorsque l'utilisateur fait glisser l'un des objets, tous les autres se déplacent vers le bas pendant le glissement.

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é de nombreux paramètres différents, et j'ai laissé certains d'entre eux dans les commentaires.

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

Answer 1

J'ai trouvé une solution qui fonctionne SANS avoir à réécrire la bibliothèque de l'interface utilisateur et qui est un correctif propre et css :

.ui-sortable-placeholder {
  display: inline-block;
height: 1px;
}

Answer 2

Cette réponse arrive sans doute trop tard pour vous aider, mais elle aidera peut-être d'autres personnes dans la même situation. J'ai trouvé votre question il y a quelques jours car j'essaie de faire le même genre de chose pour permettre à un utilisateur de réorganiser les "photos" sur une "bande de film". Le commentaire sur votre question suggérant l'utilisation de "float" plutôt que "inline-block" s'est avéré essentiel pour trouver la solution. Cela m'a conduit à utiliser un DIV de taille fixe pour contenir les éléments à trier, en évitant le changement de hauteur causé par le word-wrapping, puis en ajoutant un DIV externe avec overflow-x:scroll pour effectuer le défilement horizontal. Bonne lecture !

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

Answer 3

Une solution (pas élégante, mais qui fonctionne) proposée par un collègue est de définir float:left sur l'élément, 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);
    }
  });
})

Answer 4

Je sais que c'est une réponse un peu tardive, mais j'ai aussi des problèmes avec ça. La solution pour moi était de changer

.removeClass("ui-sortable-helper")[0];

a

.removeClass("ui-sortable-helper").html(' ')[0];

à la ligne 659 dans la version non compressée actuelle (v1.8.17).

J'espère que cela vous aidera encore.

Answer 5

Comme @BertterHeide l'a si justement commenté, le approprié La solution à ce problème consiste à modifier votre .sortable appel, en 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(' '),
    //containment:'parent',
    axis: 'x'
  });
})