JQuery UI sortable dans une zone déroulante contenant - la position de défilement “saute” quand le tri

Veuillez cocher cette presque identique à la question première: jQuery Liste Triable - barre de défilement saute lors du tri

J'ai exactement le même problème, seulement que j'ai essayé toutes les solutions proposées il n'y à pas de chance

Ici est la façon de reproduire

créer un liste triable
avoir défilement
faites défiler vers le bas
réordonner les éléments
la position de défilement de "sauts" jusqu'

Voici le code (voir aussi dans JSFiddle)

Html

<ul id="panel" class="scroll">
    <li class="content" style="background-color:red">item1</li>
    <li class="content" style="background-color:green">item2</li>
    <li class="content" style="background-color:blue">item3</li>
    <li class="content" style="background-color:gray">item4</li>
    <li class="content" style="background-color:yellow">item5</li>    
</ul>

JavaScript

$(function() {
    $("#panel").sortable({
        items: ".content",
        forcePlaceholderSize: true
    }).disableSelection();
    $(".content").disableSelection();

});

CSS

.scroll{
    overflow: scroll;
    border:1px solid red;
    height: 200px;
    width: 150px;
}
.content{
    height: 50px;
    width: 100%;
}

Voici le code (dans JSFiddle) après avoir essayé la notion de accepté de répondre à (avec pas de chance)

Je peux essayer de comprendre pourquoi ça se passe (la liste est "raccourci" pour une brève seconde), mais toutes les tentatives pour utiliser des espaces réservés ou des aides pour éviter qu'il ne fonctionne pas non plus. Je sens que j'ai essayé presque toute permutation de la "scrollable" options avec pas de chance

Navigateurs, j'ai essayé

IE9, Firefox 10.0.1, et Chrome 17

JQuery versions

de base 1.7.1, UI v 1.8.17

Je fais quelque chose de mal? Est-il une solution? Serait-ce un bug?

InformationsquelleAutor Eran Medan | 2012-02-25

3

Si vous modifier votre CSS pour la .scroll élément en ajoutant:
```
position:relative;
```
Qui devrait résoudre ce problème.
- Nice! il a résolu le problème pour le fond la plupart élément, mais il semble y avoir encore un problème avec les autres. jsfiddle.net/Fnncs/4
InformationsquelleAutor Mark Schultheiss
2

Ajoutant overflow-y:scroll à la liste triable même sans le height bien résolu pour moi. Il montre seulement une désactivé la barre de défilement, mais c'est correct.

InformationsquelleAutor Dennis

아래로 스크롤 할때 a 이런식으로 하면 됩니다.

var cY = -1;
var base = 0;
$("").sortable({
  sort: function(event, ui) {
    var nextCY = event.pageY;
    if(cY - nextCY < -10){
      if(event.clientY + ui.helper.outerHeight(true) - 20 > document.body.clientHeight) {
        base = base === 0 ? event.clientY : base;
        var move = event.clientY - base;
        var curScrollY = $(document).scrollTop();
        $(document).scrollTop(curScrollY + move+3);
        base = event.clientY;
      }
    }
  },
  //.....
});

quel est le problème? -1 vote?
Le problème est très clair. Vous avez écrit la réponse en langue non anglaise.
car je ne peux pas écrire en anglais.

InformationsquelleAutor Kwan Ung Park

Semble jQuery UI 1.9.2 résolu le problème.

Si vous ne parvenez pas à modifier la bibliothèque, il y a une solution de contournement, y compris une barre de défilement simple opération. L'idée est simple:

Garder la précédente la position de défilement de chaque fois que vous faites défiler.
Définir revenir à la position précédente lorsque vous commencez à faire glisser votre élément.

Ici vous allez,

var lastScrollPosition = 0; //variables defined in upper scope
var tempScrollPosition = 0;

window.onscroll = function () { //Up to you requirement you may change it to another elemnet e.g $("#YourPanel").onscroll
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function () {
        tempScrollPosition = lastScrollPosition; //Scrolls don't change from position a to b. They cover some numbers between a and b during the change to create a smooth sliding visual. That's why we pick the previous scroll position with a timer of 250ms.
    }, 250));

    lastScrollPosition = $(document).scrollTop(); //Up to you requirement you may change it to another elemnet e.g $("#YourPanel").onscroll
};

$("#YourSortablePanel").sortable({
    start: function (event, ui) {
        $(document).scrollTop(tempScrollPosition);
    }
});

InformationsquelleAutor Barry Guvenkaya

0

Ceci est causé par la hauteur du conteneur de changer lors du tri (juste avant l'espace réservé est créé)

Le problème est bien décrite et répondit à ce débordement de pile : https://stackoverflow.com/a/32477389/2604980

InformationsquelleAutor RaphKomjat

Vous devez vous connecter pour publier un commentaire.