comportement inattendu triables jQuery

StackOverflow https://stackoverflow.com/questions/1789169

Question

Je travaille sur un projet où je peux générer des documents Word, une des fonctionnalités est de définir une table des matières. Je veux que ma table des matières à une liste jQuery sortable pour trier les chapitres.

Je retreving les données récursivement à partir d'une table MySQL, qui fonctionne comme prévu. Depuis que je trouvais il y a des comportements étranges dans IE7 (et éventuellement d'autres versions) Je suis revenu à l'essentiel et essayé ce qui suit dans un fichier HTML simple sans structure générée par DB. 

<!doctype html>
<html>
<head>
<script type="text/javascript" src="./jquery-1.3.2.js"></script>
<script type="text/javascript" src="./ui/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
  $(function() {
    $("ul.list").sortable({
      opacity: 0.7,
      helper: 'clone',
      cursor: 'move',
      tolerance: 'pointer'
    });
  $("ul.list").selectable();
  $("ul.list").disableSelection();
});
</script>
<style type="text/css">
ul.list {
  list-style:none;
  padding:none;
  margin:none;
  border:1px solid #EFEFEF;}
ul.list:hover {
  border:1px dotted #333;}
</style>
</head>
<body>
  <ul class="list">
    <li>Chapter 1</li>
    <li>Chapter 2
      <ul class="list">
        <li>Chapter 2.1</li>
        <li>Chapter 2.2</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Avec cette source (quelle que soit la quantité de sous-niveaux) Je pense chaque sous-chapitre d'une liste triable unique dans son chapitre parent. En FireFox cela fonctionne comme il se doit, mais malheureusement au travail IE7 est le navigateur par défaut et aucun commutateur peut être.

Quelqu'un at-il des suggestions quoi faire?

Basiquement Je veux simplement réorganiser les listes et les listes imbriquées. A ce moment, je ne suis en mesure de faire glisser les arround mainchapters, lorsque je tente de faire glisser un sous-chapitre toute la structure de la liste du parent correspondant est de se traîner. Alors, lorsque je tente de glisser « Chapitre 2.2 » pour le placer au-dessus « Chapitre 2.1 » je traîne en fait « Chapitre 2 », avec le seul posibillity pour faire glisser au-dessus de « Chapitre 1 ».

J'espère que ma question est assez claire.

Voici une démo. ajouter /edit à l'URL pour voir le code et jouer avec

Était-ce utile?

La solution

Il suffit d'ajouter cette 

$('ul.list').bind('mousedown', function(e) {
  e.stopPropagation();
});

Cela arrêtera de IE bouillonne l'événement mousedown à la ul mère, ce qui provoque le comportement étrange sortable que vous avez vu. Maintenant, il devrait fonctionner comme prévu

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top