Je veux utiliser la fonction triable jQuery à tous les utilisateurs pour organiser les boîtes. Assez simple. Cependant, les boîtes peuvent devenir assez grandes, alors quand elles cliquent sur la poignée pour trier, j'aimerais que toutes les boîtes se réduisent. J'ai quelque chose qui fonctionne (illustré ci-dessous). Lorsque vous essayez de trier la première ligne, tout fonctionne très bien. Mais tout ce qui est en dessous et ça devient un peu bizarre.

Tout d'abord, y a-t-il une meilleure façon de faire cela à laquelle je ne pense pas?

Deuxièmement, si je reste avec ce code, y a-t-il un moyen de m'assurer que le div maintenant réduit qui est sélectionné s'accroche et reste avec la souris? Si vous le regardez maintenant, lorsque vous sélectionnez un div qui ne figure pas dans la première ligne, le div sélectionné est beaucoup plus élevé que l'endroit où se trouve la souris (à cause de la réduction).

Le jsFiddle: http://jsfiddle.net/cwv9usqf/5/

$('.header').mousedown(function(){ $('.content').hide(); })

$('.container').sortable({
  connectWith: '.container',
  items: '.portlet',
  handle: '.header',
  tolerance: 'pointer',
  stop: function(){ $('.content').show(); }
});

Autre remarque: dès maintenant, lorsque vous cliquez simplement sur l'en-tête, les portlets se réduisent. Y a-t-il un moyen que je puisse les faire s'effondrer uniquement lorsque la traînée se produit?

Merci d'avance!

0
Dekaiden 4 avril 2017 à 18:47

2 réponses

Meilleure réponse

Je l'ai compris:

(Fiddle mis à jour) http://jsfiddle.net/cwv9usqf/6/

$('.container').sortable({
  connectWith: '.container',
  items: '.portlet',
  handle: '.header',
  tolerance: 'pointer',
  revert: true,
  placeholder: 'placeholder',
  start: function(){ $('.content').hide(); },
  stop: function(){ $('.content').show(); }
});

J'y ai ajouté l'option 'start' et j'ai supprimé les écouteurs mousedown / mouseup tous ensemble.

1
Dekaiden 4 avril 2017 à 17:53

Quelques choses:

  1. J'ai rendu vos éléments non sélectionnables de cette façon que vous ne les mettez pas en évidence accidentellement.
  2. Je l'ai changé en une liste non ordonnée, pour supprimer le code répétitif.
  3. J'ai fait du curseur un pointeur car c'est assez standard pour les éléments insolubles.
  4. J'ai utilisé flex au lieu des valeurs px pour créer une page Web dynamique.
$("#sortable").sortable({
  revert: true
});
#sortable { 
  width: 100%; 
  list-style-type:none;
  display: flex;
  justify-content: space-between;
  -webkit-user-select: none; /* Chrome/Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
  -o-user-select: none;
  user-select: none;
}

#sortable > li {
  float: left;
  cursor: pointer;
  padding: 0.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="demo">
    <div>
        <ul id="sortable">
          <li>Home</li>
          <li>Contact Us</li>
          <li>About</li>
        </ul>
    </div>
</div>
0
Neil 4 avril 2017 à 16:07